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', '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"
  }
}

我试过重新安装模块，但没有用

Answer 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

Answer 2

好吧，如果您担心使用 overlay-navbar 那么有一种方法可以在不降低反应脚本和反应路由器性能的情况下使用它。 Overlay-Nav-bar 不使用 io 和 io5 文件夹中的任何图标，因此请按照以下步骤操作。 -转到节点模块 - >反应图标文件夹然后转到 add.js 文件，然后注释掉这一行 // export * from './io5'; 然后转到 all.d.ts 文件并注释掉同一文件。 `

// THIS FILE IS AUTO GENERATED
export * from './fa';
export * from './io';
// export * from './io5';
export * from './md';
export * from './ti';
export * from './go';
export * from './fi';
export * from './gi';
export * from './wi';
export * from './di';
export * from './ai';
export * from './bs';
export * from './ri';
export * from './fc';
export * from './gr';
export * from './hi';
export * from './si';
export * from './im';
export * from './bi';
export * from './cg';
export * from './vsc';

`

重新启动您的开发服务器。现在应该可以使用了

Answer 3

我找到了一个非常简单但有效的解决方案，问题出在 React Icons 上，因为 io 文件夹中存在某种错误，所以您需要做的就是

npm uninstall react-icons

然后通过运行

安装版本 3

npm install react-icons@3

boom 这对我来说很管用。另外，我建议您对 react-router-dom 执行相同的操作，因为其中的路由存在问题。

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

Overlay-navbar using npm overlay-navbar module?

overlay

module

npm

reactjs

npm-install