运行 React 18 和 Next.js 的样式组件出现问题。找不到模块：无法解析“进程”；

Question

我必须在 Three.js/next/ts 项目中使用 React 18 for Suspense（我尝试过使用 next/dynamic 但它不起作用）。

因此，我安装了它并根据 Next 的文档更新了所有内容：

1. 将 experimental: { runtime: 'nodejs' } 添加到 next.config.js 文件
2. 使用 "types": [ 更新了 tsconfig.json "react/next", "react-dom/next"]

我仍然收到以下错误：

error - ./node_modules/styled-components/dist/styled-components.browser.esm.js:1:1087 找不到模块：无法解析“进程”

这是我的 package.json 文件的片段：

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

我的 next.config.js 文件：

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

和我的 tsconfig.json 文件：

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

我也尝试了一些管理修复，例如删除和重新安装所有包、样式组件、重新启动计算机等。希望有人可以帮助我！提前致谢

Answer 1

所以显然你必须手动安装过程。
通过 npm i process 或 yarn add process