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 compilar 適用於 nextjs 將 React 更新到版本 18.xx 很好，但您必須將 next.js 更新到版本 12.12.3 以進行 swc minify。 我們不必在下一個配置文件中進行任何設置。 Swc 在構建時自動使用。