使用Webpack创建React App依赖问题

时间:2018-10-09 09:44:27

标签: reactjs npm

我正在完成Lynda的Learning React课程。在第3章的第二个视频中,我面临一个问题。当我在Git Bash上键入npm start时,显示以下错误:

$ npm start

> bulletin-board@0.1.0 start C:\Users\John\Desktop\Ex_Files_Learning_Reactjs\Files\Ch03\03_02\start\bulletin-board
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.19.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  C:\Users\John\node_modules\webpack (version: 2.5.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if C:\Users\John\node_modules\webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bulletin-board@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bulletin-board@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\John\AppData\Roaming\npm-cache\_logs\2018-10-09T09_26_01_403Z-debug.log

我遵循了数字1和2的步骤。但是我遇到了第3步的问题,我的项目文件夹中的package.json文件中的依赖项和/或devDependencies没有“ webpack”。

因此,我按照步骤4进行npm start。但是我也遇到同样的错误。我该怎么办才能解决此问题?

我的npm版本是5.6.0。

我被困住了,如果不解决它就无法继续进行。 NPM对我来说很烦人。我当时正在学习有关Angular的课程,但是NPM面临很多问题。现在,我正在做一个React课程,再一次,我遇到了很多问题。真烦人。

更新: 这是package.json中的代码:

{
  "name": "bulletin-board",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "^2.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

6 个答案:

答案 0 :(得分:9)

是的,我有同样的问题。我只是在C:\ Users \ username的主目录中删除了node_modules。然后,npm启动并开始工作。

答案 1 :(得分:3)

无需卸载node.js,检查并查看C:\ Users \ John中是否有一个node_modules文件夹并将其删除。

答案 2 :(得分:2)

好的。我设法解决了这个问题。我已按照以下步骤操作:

  1. 卸载node.js。
  2. 从以下位置删除node_modules文件夹:C:\ Users \ John \ node_modules
  3. 重新安装node.js。

现在,当我在Git Bash上的项目文件夹中键入npm start时,一切正常!

答案 3 :(得分:1)

遇到此问题时,您无需执行建议的所有步骤,而可以使用以下命令返回支持的eslint版本:library(rsample) diamonds %>% dim # diamonds has ~54K rows set.seed(123) diamonds_split <- initial_split(diamonds, 0.9) training_data <- training(diamonds_split) testing_data <- testing(diamonds_split) # 5 fold split train_cv <- vfold_cv(training_data, 5) train_cv # each fold has ~39K, expected roughly (0.9 * 54K) / 5 each fold ~ 9.7K # 5-fold cross-validation # A tibble: 5 x 2 splits id <named list> <chr> 1 <split [38.8K/9.7K]> Fold1 2 <split [38.8K/9.7K]> Fold2 3 <split [38.8K/9.7K]> Fold3 4 <split [38.8K/9.7K]> Fold4 5 <split [38.8K/9.7K]> Fold5

例如,如果受支持的版本是npm install eslint@^(version),只需运行6.6.0,您就可以使用了。

答案 4 :(得分:0)

只需再次安装webpack即可获取最新版本的webpack。由于Create React App提供的react-scripts软件包需要依赖项最新版本“ webpack”:“ x.x.x”

使用npm安装:

npm install --save-dev webpack

用纱安装:

yarn add webpack --dev

答案 5 :(得分:0)

运行npm ls webpack,查看哪些依赖项正在使用它或安装另一个版本。尝试更新这些库。

就我而言,这是故事书。我更新了它(和它的插件),并且它起作用了。它可能会损坏某些内容,但是您应该转到文档并更新代码。

对我有用。