@lazarv/react-serverでnode:internal/event_target:1090 process.nextTick(() => { throw err; });エラーが出る

はじめに

@lazarv/react-serverというNext.jsに変わるフレームワークがでたので試したのですが、困ったのでまとめます

問題

以下のエラーがでてしまいサーバーが起動しませんでした。

> react-server-app@0.0.0 dev
> 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@18.3.1 expected: react@0.0.0-experimental-de1eaa26-20250124 
  react-dom@18.3.1 expected: react-dom@0.0.0-experimental-de1eaa26-20250124 

node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
Error: Cannot find module 'react-dom'
Require stack:
- /home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Function._load (node:internal/modules/cjs/loader:1045:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
    at Module.require (node:internal/modules/cjs/loader:1304:12)
    at require (node:internal/modules/helpers:123:16)
    at /home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2917:20
    at Object.<anonymous> (/home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3164:5)
    at Module._compile (node:internal/modules/cjs/loader:1467:14)
    at Object..js (node:internal/modules/cjs/loader:1551:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js'
  ]
}

Node.js v22.4.0

解決方法

以下のように環境構築を行うと利用できます。

$ npm create vite@latest
✔ Project name: … react-server-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

$ cd react-server-app
$ npm i @lazarv/react-server
// tailwindCSSをいれる
$ npm install -D tailwindcss@3.4.13 postcss autoprefixer
$ npx tailwind init -p

// ファイルベースルーティング
$ touch react-server.config.json
$ rm -rf src
$ mkdir src
$ mkdir src/app
$ touch src/app/page.tsx

VSCodeでプロジェクトを開いてください

react-server.cofig.json

{
  "root": "src/app",
  "adapter": "@lazarv/react-server-adapter-vercel"
}

次にサーバー起動コマンドを変更します。

package.json

{
  "name": "react-server-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "react-server" // 変更
  },
  "dependencies": {
    "@lazarv/react-server": "^0.0.0-experimental-9ed2d6f-20250125-9716750b",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.13",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

page.tsx

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

ここでサーバーを立ち上げると先程のエラーになりますので直します

$ npm run dev
> react-server-app@0.0.0 dev
> 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@18.3.1 expected: react@0.0.0-experimental-de1eaa26-20250124 
  react-dom@18.3.1 expected: react-dom@0.0.0-experimental-de1eaa26-20250124 

reactとreact-domが不要とのことなのでpackage.jsonから消します。

package.json

{
  "name": "react-server-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "react-server"
  },
  "dependencies": {
    "@lazarv/react-server": "^0.0.0-experimental-9ed2d6f-20250125-9716750b"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.13",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

$ rm -rf node_modules
$ npm i
$ npm run dev

すると次のエラーが出ました

node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
Error: Cannot find module 'react-dom'
Require stack:
- /home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Function._load (node:internal/modules/cjs/loader:1045:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
    at Module.require (node:internal/modules/cjs/loader:1304:12)
    at require (node:internal/modules/helpers:123:16)
    at /home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2917:20
    at Object.<anonymous> (/home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3164:5)
    at Module._compile (node:internal/modules/cjs/loader:1467:14)
    at Object..js (node:internal/modules/cjs/loader:1551:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/jinwatanabe/workspace/react-server-app/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js'
  ]
}

Node.js v22.4.0

これを直すにはpackage-lock.jsonを削除すればよいです

$ rm -rf package-lock.json
$ rm -rf node_modules
$ npm i
$ npm run dev

21:36:45 [react-server] Initializing router configuration 🚦
21:36:45 [react-server] Router configuration successful ✅
21:36:45 [react-server] Adding source file page.tsx to router 📁
21:36:45 [react-server] Router configuration ready 📦
21:36:45 [react-server] Server listening on
21:36:45 [react-server]   ➜  Local:   http://localhost:3000
21:36:45 [react-server]   ➜  Network: use --host to expose
21:36:45 [react-server] ✔ Ready in 298ms 🚀
21:36:45 [react-server] Press any key to open the command menu 💻
21:36:45 [react-server] Start typing to search the docs 🔍
21:36:45 [react-server] Ctrl+C to exit 🚫

無事起動しました。あとはTailwindCSSの設定もやります。
注意は現時点ではTailwindCSS v3しか対応していません。最新版では導入ができませんでした

$ touch src/app/global.css

tailiwnd.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/app/page.tsx

import "./global.css";

export default function Home() {
  return (
    <div>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Button
      </button>
    </div>
  );
}

ここでCSSの読み込みでエラーが出てしまいます。

$ touch src/vite-env.d.ts

src/vite-env.d.ts

/// <reference types="vite/client" />

環境構築ができました！

おわりに

現時点で実験版がリリースされたばかりなのでほぼ情報がない中ここまでやれました
今後かなり期待できるフレームワークなので勉強していきます。