@lazarv/react-serverの環境構築方法について (You can remove the following packages from your project: react@19.0.0 expected: react)

はじめに

の環境構築をするときに環境構築の方法を間違えていたのでまとめます

問題

ViteでReactの環境構築をしてから@lazarv/react-serverをインストールすると以下のエラーが出ます

> react-server

You don't need to install react, react-dom or react-server-dom-webpack in your project.
@lazarv/react-server already includes a specific version of react, react-dom and react-server-dom-webpack that is compatible with the current version of @lazarv/react-server.
You can remove the following packages from your project:
  react@19.0.0 expected: react@0.0.0-experimental-de1eaa26-20250124 

以前別の方法で回避していたのですが、うまくいかないケースがありました

環境構築方法

@lazarv/react-serverは他のフレームワークとはすこし変わった方法で環境構築ができます。

まずはViteでTypeScriptの環境構築をします

$ npm create vite
✔ Project name: … react-server-handson
✔ Select a framework: › Vanilla
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript

$ cd react-server-handson
$ npm i @lazarv/react-server

こうすることで@lazarv/react-serverにはReactも同梱されているためサーバーが立ち上げられます。

$ touch react-server.config.mjs

react-server.config.mjs

export default {
  root: "src/app",
};

$ mkdir src/app
$ touch src/app/page.tsx

src/app/page.tsx

export default function Home() {
  return <div>Home</div>;
}

またVSCodeでjsxについて怒られるのでtsconfig.jsonを直します

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx", // 追加
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

$ npm run dev

http://localhost:3000を開くと無事ページが表示されました

おわりに

今後もreact-serverをたんきゅうしてきます