Problem with styled-components running React 18 and Next.js. Module not found: Can't resolve 'process'

Question

I have to use React 18 for Suspense in a three.js/next/ts project (I have tried using next/dynamic and it does not work).

So I installed it and updated everything according to Next's docs:

1. Added experimental: { runtime: 'nodejs' } to the next.config.js file
2. Updated tsconfig.json with "types": ["react/next", "react-dom/next"]

And I am still getting the following error:

error -./node_modules/styled-components/dist/styled-components.browser.esm.js:1:1087 Module not found: Can't resolve 'process'

Here is a snippet of my package.json file:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.0.0",
    "@fortawesome/react-fontawesome": "^0.1.17",
    "@react-three/drei": "^8.10.0",
    "@react-three/fiber": "^7.0.26",
    "@types/three": "^0.137.0",
    "framer-motion": "^6.2.7",
    "framer-motion-3d": "^6.2.7",
    "next": "^12.1.0",
    "next-transpile-modules": "^9.0.0",
    "popmotion": "^11.0.3",
    "react": "^18.0.0-rc.0",
    "react-burger-menu": "^3.0.6",
    "react-dom": "^18.0.0-rc.0",
    "react-responsive": "^9.0.0-beta.6",
    "styled-components": "^5.3.3",
    "three": "^0.137.5"
  },
  "devDependencies": {
    "@types/node": "^16.3.3",
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "@types/styled-components": "^5.1.11",
    "@typescript-eslint/eslint-plugin": "^4.28.3",
    "@typescript-eslint/parser": "^4.28.3",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^1.13.2",
    "eslint": "^7.30.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^12.0.0",
    "tailwindcss": "^2.2.4",
    "twin.macro": "^2.6.2",
    "typescript": "4.3.5"
  },
  "resolutions": {
    "styled-components": "^5"
  }

My next.config.js file:

module.exports = {
  experimental: {
    runtime: 'nodejs'
  },
  reactStrictMode: false,
  webpack: (config) => {
    // Unset client-side javascript that only works server-side
    config.resolve.fallback = { fs: false, module: false };
    return config;
  }
};

And my tsconfig.json file:

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "baseUrl": "src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "paths": {
      "@/*": ["*"],
      "@/assets/*": ["assets/*"],
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/styles/*": ["styles/*"],
      "@/utils/*": ["utils/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext",
    "types": ["react/next", "react-dom/next"]
  },
  "include": ["next-env.d.ts", "twin.d.ts", "src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

I have also tried a few admin fixes like deleting and reinstalling all packages, styled-components, restarting my computer, etc. Hope someone can help me with this! Thanks in advance

Answer 1

So apparently you have to manually install process. Either by npm i process or yarn add process