使用 npm 覆盖导航栏模块的覆盖导航栏？答案

【问题标题】：Overlay-navbar using npm overlay-navbar module?使用 npm 覆盖导航栏模块的覆盖导航栏？
【发布时间】：2022-01-21 01:52:13
【问题描述】：

我正在使用 npm overlay-navbar 模块创建一个覆盖导航栏 https://www.npmjs.com/package/overlay-navbar 但我收到一个错误：

请求的模块“./io5”包含名称“iologoandroid”、“iologoangular”、 'iologoapple'、'iologobitbucket'、'iologobitcoin'、'iologobuffer'、 “iologochrome”、“iologoclosedcaptioning”、“iologocodepen”、“iologocss3”、“iologodesignernews”、“iologodribbble”、 'iologodropbox'、'iologoeuro'、'iologofacebook'、'iologoflickr'、 'iologofoursquare'、'iologogithub'、'iologogoogle'、'iologohackernews'、'iologohtml5'、'iologoinstagram'、 'iologoionic'，'iologoionitron'，'iologojavascript'，'iologolinkedin'， 'iologomarkdown'、'iologonoSmoking'、'iologonodejs'、'iologonpm'、'iologooctocat'、 'iologopinterest'、'iologoplaystation'、'iologopython'、'iologoreddit'、'iologorss'、'iologosass'、'iologoskype'、 'iologoslack'、'iologosnapchat'、'iologosteam'、'iologotumblr'、'iologotux'、'iologotwitch'、'iologotwitter'、 'iologousd'，'iologovimeo'，'iologovk'，'iologowhatsapp'， 'iologowindows'、'iologowordpress'、'iologoxbox'、'iologoxing'、'iologoyahoo'、'iologoyen'、' iologoyoutube' 与之前请求的模块 './io'

我可以做些什么来解决这个问题？

这是我的 package.json 文件：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "overlay-navbar": "^1.1.1",
    "react": "^17.0.2",
    "react-alert": "^7.0.3",
    "react-alert-template-basic": "^1.0.2",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "webpack": "^5.65.0"
  }
}

我尝试过重新安装模块，但它不起作用

【问题讨论】：

你能至少显示你的 package.json 吗？我认为这个问题与 webpack 5 有关
我已经编辑了我的问题，现在你可以看到 package.json

标签： reactjs npm module overlay npm-install

【解决方案1】：

我认为这个问题与 react-icons 和 webpack 5 有关。有人已经在 react-icons github https://github.com/react-icons/react-icons/issues/514 发布了类似的问题

你正在使用 create-react-app 版本 5，它使用 webpack 5 作为模块捆绑器。在 react-icons 更新他们的库（如果你坚持使用版本 5）之前，我们真的无能为力。

同时，通过降级 create-react-app 将 webpack 降级到版本 4 的最简单方法。试试这个命令： npm i react-scripts@4

**注意：我也注意到您正在使用 react-router-dom ^6.2.1，您也应该将其降级，因为 overlay-navbar 没有不支持那个版本。试试这个命令： npm i react-router-dom@5

【讨论】：