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

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.