Overlay-navbar using npm overlay-navbar module?

user_16544446 0
Viewed 2808

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

npm npm-install reactjs overlay module
3 Answers

I have found a very simple but effective solution, Problem is offcourse with React Icons as there is some kind of bug in io folder, so all you need to do is

npm uninstall react-icons

then install version 3 by running

npm install react-icons@3

boom this worked in my case. Also i suggest you to do the same for react-router-dom because there is an issue with Route in it.

user_157564390

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

user_171786790

Well, if your are concerned about using overlay-navbar then there is a way of using it without degrading react Scripts and react router. Overlay-Nav-bar doesn't uses any icons from io and io5 folders so follow the following steps. -Go to node modules -> react icons folder Then Go to add.js file and then comment out this line // export * from './io5'; Then go to all.d.ts file and comment out the same file. `

// 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';

`

Restart Your Development server. It should work Now

user_123031600
Related