reactjs - Overlay-navbar 使用 npm overlay-navbar 模块？

Question

我正在使用 npm overlay-navbar 模块创建一个 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','iologointerest', '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"
  }
}

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

Answer 1

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

并且您正在使用 create-react-app 版本 5，它使用 webpack 5 作为模块 bundler 。在 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