错误：`experimental.runtime` 需要与 React 18 一起启用`experimental.reactRoot`

Question

我有一个项目（下一个 12.1.6 + react 18.1 + react-dom 18.1）。现在我想向它添加 React 服务器组件。像这样更新了我的 next.config.js

const nextConfig = {
  distDir: '../../.next',
  reactStrictMode: true,
  experimental: {
    runtime: 'nodejs',
    serverComponents: true,
    concurrentFeatures: true,
  },
};

module.exports = nextConfig;

但不管怎样，当我执行 npm run start:dev （我相信 npm run build 工作正常）我得到错误：

Error: `experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18. at Object.getBaseWebpackConfig [as default] (G:\ORLVNIcard\orlvni-business-card\node_modules\next\build\webpack-config.ts:355:11) at async Promise.all (index 0) at Span.traceAsyncFn (G:\ORLVNIcard\orlvni-business-card\node_modules\next\trace\trace.ts:106:14) at Span.traceAsyncFn (G:\ORLVNIcard\orlvni-business-card\node_modules\next\trace\trace.ts:106:14) at HotReloader.start (G:\ORLVNIcard\orlvni-business-card\node_modules\next\server\dev\hot-reloader.ts:518:21) at DevServer.prepare (G:\ORLVNIcard\orlvni-business-card\node_modules\next\server\dev\next-dev-server.ts:404:5) at ViewService.onModuleInit (G:\ORLVNIcard\orlvni-business-card\src\server\view\view.service.ts:19:7) at async Promise.all (index 0) at Object.callModuleInitHook (G:\ORLVNIcard\orlvni-business-card\node_modules\@nestjs\core\hooks\on-module-init.hook.js:43:5) at NestApplication.callInitHook (G:\ORLVNIcard\orlvni-business-card\node_modules\@nestjs\core\nest-application-context.js:169:13)

Next.js 文档在 https://nextjs.org/docs/advanced-features/react-18/server-components 中说我应该使用 next@canary 而不是 next@12.1.6，它有效，但我还有另一个问题在HookWebpackError: The "to" argument must be of type string. Received undefined 中使用 @canary 和 @12.1.6 确实 not 在新鲜的几乎没有空的项目中抛出错误（下一个 12.1.6 + react 18.1 + react-dom 18.1）。

我的 package.json 的一部分看起来像这样

"scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build && cd src/client && next build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/common": "^8.0.0",
    "@nestjs/config": "^1.1.5",
    "@nestjs/core": "^8.0.0",
    "@nestjs/jwt": "^8.0.0",
    "@nestjs/mongoose": "^9.0.2",
    "@nestjs/passport": "^8.0.1",
    "@nestjs/platform-express": "^8.0.0",
    "@types/bcrypt": "^5.0.0",
    "@types/mongoose": "^5.11.97",
    "bcrypt": "^5.0.1",
    "cookie-parser": "^1.4.6",
    "dotenv": "^10.0.0",
    "mongodb": "^4.3.1",
    "mongoose": "^6.1.10",
    "mssql": "^7.3.0",
    "next": "^12.1.6",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.2.0",
    "sass": "^1.45.0",
    "ts-node": "^10.0.0"
  },
  "devDependencies": {
    "@nestjs/cli": "^8.0.0",
    "@nestjs/schematics": "^8.0.0",
    "@nestjs/testing": "^8.0.0",
    "@types/cookie-parser": "^1.4.2",
    "@types/express": "^4.17.13",
    "@types/jest": "27.0.2",
    "@types/node": "^16.0.0",
    "@types/passport-jwt": "^3.0.6",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.2.5",
    "prettier": "^2.3.2",
    "source-map-support": "^0.5.20",
    "supertest": "^6.1.3",
    "ts-jest": "^27.0.3",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "^3.10.1",
    "typescript": "^4.3.5"
  },

这就是我开始下一个应用程序的方式

import { Injectable, OnModuleInit } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import createServer from 'next';
import { NextServer } from 'next/dist/server/next';
import { Request, Response } from 'express';

@Injectable()
export class ViewService implements OnModuleInit {
  private server: NextServer;

  constructor(private configService: ConfigService) {}

  async onModuleInit(): Promise<void> {
    try {
      this.server = createServer({
        dev: this.configService.get<string>('NODE_ENV') !== 'production',
        dir: './src/client',
      });
      await this.server.prepare();
    } catch (error) {
      console.error(error);
    }
  }

  handler(req: Request, res: Response) {
    return this.server.getRequestHandler()(req, res);
  }
}

猜测错误是由于下一个在 @12.1.6 中没有看到 react 18，但我不明白为什么，尤其是在新项目中一切正常。

Answer 1

删除你的 package-lock.json 并安装 next 的金丝雀版本

npm install next@canary react@latest react-dom@latest

然后在你的 next.config.js 中添加实验设置

 experimental: { 
      reactRoot: true, 
      runtime: "nodejs", 
      serverComponents: true, 
      concurrentFeatures: true 
  }