javascript - npm update v5.4.2 后 ./node_modules/react-router-dom 中找不到模块错误

Question

当我尝试将 npm 版本从 3.10.10 更新到 5.4.2 并将 React 从 15.3.0 迁移到 16.0 时，我删除了 node_modules 并再次运行 npm install 。之后我尝试运行我的应用程序，但出现以下错误:

ERROR in ./node_modules/react-router-dom/es/BrowserRouter.js
Module not found: Error: Can't resolve 'history/createBrowserHistory' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/BrowserRouter.js 10:0-57
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/HashRouter.js
Module not found: Error: Can't resolve 'history/createHashHistory' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/HashRouter.js 10:0-54
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/MemoryRouter.js
Module not found: Error: Can't resolve 'react-router/es/MemoryRouter' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/MemoryRouter.js 2:0-56
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/Prompt.js
Module not found: Error: Can't resolve 'react-router/es/Prompt' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/Prompt.js 2:0-44
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/StaticRouter.js
Module not found: Error: Can't resolve 'react-router/es/StaticRouter' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/StaticRouter.js 2:0-56
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/Switch.js
Module not found: Error: Can't resolve 'react-router/es/Switch' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/Switch.js 2:0-44
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js
ERROR in ./node_modules/react-router-dom/es/matchPath.js
Module not found: Error: Can't resolve 'react-router/es/matchPath' in 'D:\app\node_modules\react-router-dom\es'
 @ ./node_modules/react-router-dom/es/matchPath.js 2:0-50
 @ ./node_modules/react-router-dom/es/index.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path react-hot-loader/patch webpack-hot-middleware/client?reload=true ./src/index.js

我的package.json:

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "application",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm-run-all --parallel start-message",
    "start": "npm-run-all --parallel test:watch open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "jest",
    "test:CI": "babel-node tools/testCi.js",
    "test:cover": "npm run test -- --coverage ",
    "test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
    "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
  },
  "author": "me",
  "license": "me",
  "dependencies": {
    "@devexpress/dx-react-core": "1.0.0-alpha.10",
    "@devexpress/dx-react-grid": "1.0.0-alpha.10",
    "@devexpress/dx-react-grid-material-ui": "1.0.0-alpha.10",
    "material-ui": "1.0.0-beta.11",
    "material-ui-icons": "1.0.0-beta.15",
    "object-assign": "4.1.1",
    "react": "16.0.0",
    "react-autosuggest": "9.3.2",
    "react-dom": "16.0.0",
    "react-redux": "5.0.6",
    "react-router-dom": "4.2.2",
    "react-router-redux": "4.0.8",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "autoprefixer": "7.1.3",
    "autosuggest-highlight": "3.1.0",
    "babel-cli": "6.26.0",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.8",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.24.1",
    "browser-sync": "2.18.13",
    "chalk": "2.1.0",
    "connect-history-api-fallback": "1.3.0",
    "coveralls": "2.13.1",
    "css-loader": "0.28.7",
    "enzyme": "2.9.1",
    "eslint": "4.5.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-react": "7.3.0",
    "eslint-watch": "3.1.2",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "html-webpack-plugin": "2.30.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "21.2.1",
    "jest-cli": "21.2.1",
    "json-loader": "0.5.7",
    "lodash": "4.17.4",
    "mockdate": "2.0.2",
    "node-sass": "4.5.3",
    "npm-run-all": "4.1.1",
    "numeral": "2.0.6",
    "opn-cli": "3.1.0",
    "postcss-loader": "2.0.6",
    "prompt": "1.0.0",
    "prop-types": "15.6.0",
    "react-hot-loader": "3.0.0-beta.6",
    "react-test-renderer": "16.0.0",
    "react-validation": "2.10.9",
    "redux-immutable-state-invariant": "2.0.0",
    "replace": "0.3.0",
    "rimraf": "2.6.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "typeface-roboto": "0.0.35",
    "url-loader": "0.5.9",
    "validator": "8.2.0",
    "webpack": "3.5.5",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-dev-middleware": "1.12.0",
    "webpack-hot-middleware": "2.18.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [],
  "repository": {
    "type": "git",
    "url": ""
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
      "\\.(css|less)$": "<rootDir>/tools/assetsTransformer.js"
    }
  },
  "babel": {
    "presets": [
      "react",
      "stage-1"
    ],
    "env": {
      "development": {
        "presets": [
          "env",
          "react-hmre"
        ],
        "plugins": [
          "transform-class-properties"
        ]
      },
      "production": {
        "presets": [
          [
            "env",
            {
              "es2015": {
                "modules": false
              },
              "targets": {
                "ie": 9,
                "uglify": true
              }
            }
          ]
        ],
        "plugins": [
          "transform-react-constant-elements",
          "transform-react-remove-prop-types",
          "transform-class-properties"
        ]
      },
      "test": {
        "presets": [
          "env"
        ]
      }
    }
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings"
    ],
    "plugins": [
      "react"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "experimentalObjectRestSpread": true
      }
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true,
      "jquery": true,
      "jest": true
    },
    "rules": {
      "quotes": 0,
      "no-console": 1,
      "no-debugger": 1,
      "no-var": 1,
      "semi": [
        1,
        "always"
      ],
      "no-trailing-spaces": 0,
      "eol-last": 0,
      "no-underscore-dangle": 0,
      "no-alert": 0,
      "no-lone-blocks": 0,
      "jsx-quotes": 1,
      "react/display-name": [
        1,
        {
          "ignoreTranspilerName": false
        }
      ],
      "react/forbid-prop-types": [
        1,
        {
          "forbid": [
            "any"
          ]
        }
      ],
      "react/jsx-boolean-value": 0,
      "react/jsx-closing-bracket-location": 0,
      "react/jsx-curly-spacing": 1,
      "react/jsx-indent-props": 0,
      "react/jsx-key": 1,
      "react/jsx-max-props-per-line": 0,
      "react/jsx-no-bind": 0,
      "react/jsx-no-duplicate-props": 1,
      "react/jsx-no-literals": 0,
      "react/jsx-no-undef": 1,
      "react/jsx-pascal-case": 1,
      "react/jsx-sort-prop-types": 0,
      "react/jsx-sort-props": 0,
      "react/jsx-uses-react": 1,
      "react/jsx-uses-vars": 1,
      "react/jsx-wrap-multilines": 1,
      "react/no-danger": 1,
      "react/no-did-mount-set-state": 1,
      "react/no-did-update-set-state": 1,
      "react/no-direct-mutation-state": 1,
      "react/no-multi-comp": 1,
      "react/no-set-state": 0,
      "react/no-unknown-property": 1,
      "react/prefer-es6-class": 1,
      "react/prop-types": 1,
      "react/react-in-jsx-scope": 1,
      "import/extensions": 1,
      "react/self-closing-comp": 1,
      "react/sort-comp": 1
    },
    "globals": {}
  }
}

如果我使用 npm 版本 3.10.10 和 React 15.3.0，我可以正常运行我的应用程序，但如果我想更新 React 或 Material-ui，由于某种原因，我会收到 UNMET PEER DEPENDENCE 错误。注意: Node 版本 6.11.4。

Answer 1

我通过安装react-router解决了这个问题。我的 react-router-dom 版本是 4.2.2。

npm install --save 'react-router'