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

Answer 1

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.