NextJS，SWC，React18，ReferenceError:未定义React

Question

我将我的Nextjs网站更新为React18，并希望切换到SWC编译器。我很难想办法让这件事起作用。我以前没有定制的babelrc配置。不管我做什么我都会得到

Error occurred prerendering page "/en/auth". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: React is not defined

在建设我的网站时

这是我的next.config.js

const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
} = require("next/constants");

const { i18n } = require("./next-i18next.config");

module.exports = (phase) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    env,
    swcMinify: false,
    //TODO
    /* reactStrictMode: true, */
    i18n,
    //TODO
    eslint: {
      ignoreDuringBuilds: true,
    },
    compiler: {
      removeConsole: isProd ? { exclude: ["error"] } : true,
    },
    experimental: {
      forceSwcTransforms: true,
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /\.pdf$/,
        issuer: /\.tsx?$/,
        use: [
          "next-swc-loader",
          {
            loader: "swc-loader",
            options: {
              babel: false,
              name: "*.pdf",
            },
          },
        ],
      });

      config.module.rules.push({
        test: /\.svg$/,
        issuer: /\.tsx?$/,
        include: [options.dir],
        use: [
          "next-swc-loader",
          {
            loader: "@svgr/webpack",
            options: { babel: false },
          },
        ],
      });

      return config;
    },
  };

  return nextConfig;
};

在babel中，您可以设置运行时来修复这个问题。

 {
     "presets": [
         "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
     ]
 }

SWC是否有类似的设置？从他们的文档来看，这似乎应该由盒子来处理，所以我唯一的想法是SWC实际上并没有被使用，但它仍然默认为Babel。

编辑：

我的package.json

{
  "name": "@example/site",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev -p 3005",
    "build": "next build",
    "start": "next start",
    "svgr": "npx @svgr/cli -d src/components/icons --ignore-existing --icon --typescript public/icons",
    "prepare-husky": "husky install",
    "format": "prettier -w .",
    "format:check": "prettier -c .",
    "lint": "next lint",
    "lint:fix": "eslint src --fix && yarn format",
    "lint:strict": "eslint --max-warnings=0 src"
  },
  "dependencies": {
    "@hookform/resolvers": "2.9.7",
    "@svgr/webpack": "6.3.1",
    "axios": "0.27.2",
    "clsx": "1.2.1",
    "firebase": "9.9.2",
    "framer-motion": "7.5.0",
    "immer": "9.0.15",
    "lottie-react": "2.3.1",
    "next": "12.3.1",
    "next-i18next": "10.2.0",
    "next-language-detector": "1.0.2",
    "prettier": "2.7.1",
    "react": "18.2.0",
    "react-color": "2.19.3",
    "react-date-picker": "8.4.0",
    "react-datepicker": "4.8.0",
    "react-dom": "18.2.0",
    "react-dropzone": "12.1.0",
    "react-hook-form": "7.36.1",
    "react-icons": "4.4.0",
    "react-lottie-player": "1.4.3",
    "react-phone-number-input": "3.2.6",
    "react-query": "3.39.2",
    "react-responsive": "9.0.0-beta.10",
    "react-tippy": "1.4.0",
    "react-use": "17.4.0",
    "tailwind-merge": "1.5.1",
    "tailwind-scrollbar-hide": "1.1.7",
    "yup": "0.32.11",
    "zustand": "3.7.0"
  },
  "devDependencies": {
    "@svgr/cli": "6.3.1",
    "@swc/core": "^1.3.4",
    "@types/node": "17.0.15",
    "@types/react": "18.0.17",
    "@types/react-color": "3.0.6",
    "@types/react-datepicker": "4.4.2",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "10.4.8",
    "config": "workspace:*",
    "dotenv": "16.0.1",
    "eslint": "8.21.0",
    "install": "0.13.0",
    "npm": "8.16.0",
    "postcss": "8.4.16",
    "swc-loader": "^0.2.3",
    "tailwindcss": "3.1.8",
    "tsconfig": "workspace:*",
    "typescript": "4.7.4"
  }
}

Answer 1

Swc编译器是针对nextjs的，您可以对版本18.xx进行更新，但对于swc minify，您必须将下一个js更新到12.12.3版本。我们不需要在下一个配置文件中做任何设置。Swc在生成时自动使用。