NextJS, SWC, React18, ReferenceError: React is not defined

Question

I updated my Nextjs website to React18 and wanted to switch to SWC compiler. I am having a hard time wrapping my head around how to get this to work. I didn't have a custom babelrc config before. Whatever I do I keep getting

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

ReferenceError: React is not defined

When building my site

This is my 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;
};

In babel you can set the runtime to fix this

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

Is there similar setup for SWC? From their docs it seems that this should be handled out of the box so my only idea is that SWC is not actually being used but its still defaulting to Babel

EDIT:

My 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"
  }
}

score 0 · Answer 1 · answered Oct 01 '22 at 04:41

0

Swc compilar is for nextjs it is good that you updated React to version 18.xx but you will have to update next js to version 12. 12.3 for swc minify. We don't have to do any settings in next config file. Swc is automatically used at build.

answered Oct 01 '22 at 04:41

Ranu Vijay

1,137
9
18

Still the same result, updated with my versions – Nikola-Milovic Oct 01 '22 at 17:20
a silly question, have you deleted your .next folder and run a dev or build again? – Ranu Vijay Oct 01 '22 at 18:06
Yep I did, but now I made a new repo that reproduces the problem, and I am not encountering the problem with the same configuration files. I'll have to do more digging and then report back – Nikola-Milovic Oct 01 '22 at 19:24
May be the update of nextjs did not went well, or there were internal files which were not updated, creating a whole new repo installed all the correct files. – Ranu Vijay Oct 02 '22 at 05:19
It was ` "compilerOptions": { "jsx": "react-jsx",`.... I had it on `react` and it wasnt trasnforming it. This had to be added to my shared UI library – Nikola-Milovic Oct 02 '22 at 09:10

NextJS, SWC, React18, ReferenceError: React is not defined

1 Answers1