I am Creating a overlay-navbar using npm overlay-navbar module https://www.npmjs.com/package/overlay-navbar But I am getting a error:

the requested module './io5' contains conflicting star exports for the names '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' with the previous requested module './io'

what can I do to resolve this issue ?

Here is my package.json file :

{
  "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"
  }
}

I have tried reinstalling modules but it does'nt work

CodePudding user response：

I think this issue is related to react-icons and webpack 5. Someone has already posted a similar issue in react-icons github https://github.com/react-icons/react-icons/issues/514

and you're using create-react-app version 5 which use webpack 5 as module bundler. Nothing we can really do until react-icons updating their library regarding this (if you insist on using version 5).

Meanwhile, the easiest way you can downgrade your webpack to version 4 by downgrading create-react-app. Try this command: npm i react-scripts@4

**note: I notice too that you're using react-router-dom ^6.2.1, you should downgrade this too as overlay-navbar doesn't support that version. Try this command: npm i react-router-dom@5