CRA项目节点v14.17.0-加载Postcss“ Postcss-preset-env”插件失败：找不到模块＆＃x27; node：vm＆＃x27;

Question

尝试启动使用节点14.17.0 - ＆gt的CRA项目时，我会遇到以下错误。加载PostCSS“ PostCSS-PRESET-ENV”插件失败：无法找到模块'node：vm'

编译的问题：x

error in ./src/app.css（./node_modules/css-css-loader/css-loader/dist/dist/cjs.js？ prureet 1 .rules [0] .ONEOF [5] .RISE 1 ！ 。

​node_modules/postcss-loader/dist/cjs.js）： 加载PostCSS“ PostCSS-Preset-env”插件失败：找不到模块'node：vm' Require stack:

• /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-loadist/dist/dist/dist/dist/utils.js/uster/niltonxd/niltonxd/workspace/harv-harvest-frontend-frontend/ norode_modules/postcss-loaderers-loadererer lostererer /Dist/index.js/users/niltonxd/workspace/harv-harvest-frontend/node_modules/postcss-loader/dist/cjs.js/clces.js/uffer/niltonxd/niltonxd/workspace/harv-harvest/harv-harvest-frontend-frontend/node_modules/loader-loader/loader-runer/lib-runnernernernernernernernernernerner/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/users/niltonxd/workspace/harv-harvest-frontend/src/app.css）

href =“

{
  "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 [email protected] --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/$1",
      "@util/(.*)": "<rootDir>/./src/util/$1",
      "@hooks/(.*)": "<rootDir>/./src/hooks/$1",
      "@constants/(.*)": "<rootDir>/./src/constants/$1",
      "@containers/(.*)": "<rootDir>/./src/containers/$1",
      "@routes/(.*)": "<rootDir>/./src/routes/$1",
      "@appRedux/(.*)": "<rootDir>/./src/appRedux/$1"
    }
  }
}

https://i.sstatic.net.net/0wgbi.jpg

Answer 1

由于看来，此错误将通过安装node.js 的最新版本来暂时修复。

因此，要解决此问题，请按照以下步骤进行操作：

1. 下载并安装最新node> node> node.js版本（建议大多数用户，这是16.15.0此刻）。
2. 从项目中删除node_modules目录。然后，您可以选择使用npm使用NPM缓存清洁的缓存，并使用npm缓存验证进行验证。
3. 删除package-lock.json/yarn.lock文件。
4. 重新安装所有依赖项，并使用以下命令之一创建一个新的依赖关系树：npm i/npm install/yarn/yarn install install。

Note1 ：如果在任何情况下，您都在React Projects中使用node-sass，建议使用sass。

note2 ：在某些情况下，跳过步骤1 也将按预期工作，但是我建议升级node.js版本，如果您没有其他依赖性以防止这一点。

Note3 ：正如@ivaniltonbezerra在评论中提到的那样，某些应用程序可能会引发错误，因为升级node.js至其最新版本也将升级npm 。它可能与您当前的依赖树在生产中不兼容，因此，为防止这样一个问题，您必须使用 - 传统peer-deps 恢复旧依赖性的旧行为。

现在更新

此版本似乎已在 postcss prestet env envim中永久解决。跳过步骤1的步骤也将解决问题。

Answer 2

我也有同样的问题。我正在使用MacOS，因此，如果我们使用Windows或Linux，以下某些命令不适用。

我做了以下步骤来解决问题：

1. 删除node_modules并清除NPM缓存

     rm -f -r node_modules＆amp;＆amp; NPM缓存验证
    

2. 安装当前最新节点版本（16.15.0）

     //如果使用NVM来管理节点版本
    NVM安装16.15.0
    NVM使用16.15.0
    

我们可以访问在这里如果我们使用N，Homebrew或Macports

3. 重新安装了项目软件包

     npm i
    

Answer 3

您最有可能尝试在图像内使用创建反应应用，并且图像的当前节点版本/配置正在与Create-React-React-App跨越电线；这就是我刚刚使用docker误执行的操作，并且

我在使用Create-react-app时，我得到了与Node：VM作为丢失的模块的相同的编译错误，请在任何Docker/ docker/开发环境图像，只需按原样运行npx命令（可能还可以帮助您在本地机器上下载节点），

npx create-react-app my-app --template typescript

这有助于有所帮助，我知道解决了我的问题