CRA 项目节点 v14.17.0 - 加载 PostCSS "postcss-preset-env" 插件失败：找不到模块 'node:vm'
CRA project node v14.17.0 - Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
尝试启动 CRA 项目时出现以下错误 运行 node 14.17.0 -> Loading PostCSS "postcss-preset-env" plugin failed : 找不到模块 'node:vm'
编译为 problems:X
错误在./src/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use[2 ]!./src/app.css)
模块错误（来自./node_modules/postcss-loader/dist/cjs.js）：
加载 PostCSS“postcss-preset-env”插件失败：找不到模块 'node:vm'
需要堆栈：
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/@csstools/postcss-trigonometric-functions/dist/index.cjs
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js
(@/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.23",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"antd": "^4.18.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.2.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:@hot-loader/react-dom@^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"recharts": "^1.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.16.4",
"yup": "^0.27.0"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom@17.0.2 --save",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-private-methods": "^7.14.5",
"@babel/plugin-proposal-private-property-in-object": "^7.15.4",
"@babel/preset-typescript": "^7.16.7",
"@commitlint/cli": "^16.0.2",
"@commitlint/config-conventional": "^16.0.0",
"@testing-library/cypress": "^8.0.1",
"@testing-library/dom": "^8.5.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.3.0",
"@types/lodash": "^4.14.182",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.24",
"@types/yup": "^0.29.13",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.1.8",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"@components/(.*)": "<rootDir>/./src/components/",
"@util/(.*)": "<rootDir>/./src/util/",
"@hooks/(.*)": "<rootDir>/./src/hooks/",
"@constants/(.*)": "<rootDir>/./src/constants/",
"@containers/(.*)": "<rootDir>/./src/containers/",
"@routes/(.*)": "<rootDir>/./src/routes/",
"@appRedux/(.*)": "<rootDir>/./src/appRedux/"
}
}
}
看起来 此错误将通过安装最新版本 Node.js.
暂时得到修复
因此，要解决此问题，请按照以下步骤操作：
- 下载并安装latest
Node.js version（推荐给大多数用户，此时为16.15.0）。
- 从项目中删除
node_modules 目录。然后您可以选择使用 npm cache clean 清除 npm 缓存并使用 npm cache verify. 验证它
- 删除
package-lock.json/yarn.lock 文件。
- 重新安装所有依赖项并使用以下命令之一创建新的依赖项树：
npm i/npm install/yarn/yarn install.
注1：如果无论如何，你在React项目中使用node-sass，it is recommended改为使用sass。
注意2：在某些情况下跳过步骤1也可以正常工作，但我建议升级Node.js版本如果您没有其他依赖项来防止这种情况发生。
Note3：正如@IvaniltonBezerra 在评论中提到的，某些应用程序构建可能会引发错误，因为将 Node.js 升级到其最新版本会升级 npm 它也可能与您当前在生产中的依赖树不兼容，因此为防止出现此类问题，您必须使用 --legacy-peer-deps 来恢复旧依赖项的旧行为。
更新
这似乎在 SCSS core 中得到了永久解决，按照上述步骤跳过步骤 1 也可以解决问题。
您很可能试图在图像内部使用 create-react-app，而图像的当前节点 version/configurations 正在与 create-react-app 交叉；这就是我刚刚错误地使用 Docker 所做的事情，并且我得到了与 node:vm 相同的完全编译错误，因为缺少模块
如果您正在使用 create-react-app，请不要在任何 Docker/Dev 环境图像中使用它，只需 运行 终端中的 npx 命令（也可能有助于将节点下载到本地计算机上）
npx create-react-app my-app --template typescript
希望对您有所帮助，我知道这解决了我的问题
我遇到了同样的问题。我使用的是 macOS，所以如果我们使用 Windows 或 Linux.
，下面的一些命令不适用
我按照以下步骤解决了这个问题：
删除 node_modules 并清除 npm 缓存
rm -f -r node_modules && npm cache verify
安装当前最新的node版本(16.15.0)
// if you are using nvm to manage the node versioning
nvm install 16.15.0
nvm use 16.15.0
如果我们使用 N、自制软件或 MacPorts，我们可以访问 here
重新安装项目包
npm i
尝试启动 CRA 项目时出现以下错误 运行 node 14.17.0 -> Loading PostCSS "postcss-preset-env" plugin failed : 找不到模块 'node:vm'
编译为 problems:X
错误在./src/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use[2 ]!./src/app.css)
模块错误（来自./node_modules/postcss-loader/dist/cjs.js）： 加载 PostCSS“postcss-preset-env”插件失败：找不到模块 'node:vm' 需要堆栈：
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/@csstools/postcss-trigonometric-functions/dist/index.cjs
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
- /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js
(@/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.23",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"antd": "^4.18.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.2.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:@hot-loader/react-dom@^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"recharts": "^1.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.16.4",
"yup": "^0.27.0"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom@17.0.2 --save",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-private-methods": "^7.14.5",
"@babel/plugin-proposal-private-property-in-object": "^7.15.4",
"@babel/preset-typescript": "^7.16.7",
"@commitlint/cli": "^16.0.2",
"@commitlint/config-conventional": "^16.0.0",
"@testing-library/cypress": "^8.0.1",
"@testing-library/dom": "^8.5.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.3.0",
"@types/lodash": "^4.14.182",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.24",
"@types/yup": "^0.29.13",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.1.8",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"@components/(.*)": "<rootDir>/./src/components/",
"@util/(.*)": "<rootDir>/./src/util/",
"@hooks/(.*)": "<rootDir>/./src/hooks/",
"@constants/(.*)": "<rootDir>/./src/constants/",
"@containers/(.*)": "<rootDir>/./src/containers/",
"@routes/(.*)": "<rootDir>/./src/routes/",
"@appRedux/(.*)": "<rootDir>/./src/appRedux/"
}
}
}
看起来 此错误将通过安装最新版本 Node.js.
因此，要解决此问题，请按照以下步骤操作：
- 下载并安装latest
Node.jsversion（推荐给大多数用户，此时为16.15.0）。 - 从项目中删除
node_modules目录。然后您可以选择使用npm cache clean清除npm缓存并使用npm cache verify. 验证它
- 删除
package-lock.json/yarn.lock文件。 - 重新安装所有依赖项并使用以下命令之一创建新的依赖项树：
npm i/npm install/yarn/yarn install.
注1：如果无论如何，你在React项目中使用node-sass，it is recommended改为使用sass。
注意2：在某些情况下跳过步骤1也可以正常工作，但我建议升级Node.js版本如果您没有其他依赖项来防止这种情况发生。
Note3：正如@IvaniltonBezerra 在评论中提到的，某些应用程序构建可能会引发错误，因为将 Node.js 升级到其最新版本会升级 npm 它也可能与您当前在生产中的依赖树不兼容，因此为防止出现此类问题，您必须使用 --legacy-peer-deps 来恢复旧依赖项的旧行为。
更新
这似乎在 SCSS core 中得到了永久解决，按照上述步骤跳过步骤 1 也可以解决问题。
您很可能试图在图像内部使用 create-react-app，而图像的当前节点 version/configurations 正在与 create-react-app 交叉；这就是我刚刚错误地使用 Docker 所做的事情，并且我得到了与 node:vm 相同的完全编译错误，因为缺少模块
如果您正在使用 create-react-app，请不要在任何 Docker/Dev 环境图像中使用它，只需 运行 终端中的 npx 命令（也可能有助于将节点下载到本地计算机上）
npx create-react-app my-app --template typescript
希望对您有所帮助，我知道这解决了我的问题
我遇到了同样的问题。我使用的是 macOS，所以如果我们使用 Windows 或 Linux.
，下面的一些命令不适用我按照以下步骤解决了这个问题：
删除 node_modules 并清除 npm 缓存
rm -f -r node_modules && npm cache verify安装当前最新的node版本(16.15.0)
// if you are using nvm to manage the node versioning nvm install 16.15.0 nvm use 16.15.0
如果我们使用 N、自制软件或 MacPorts，我们可以访问 here
重新安装项目包
npm i