Overlay-navbar using npm overlay-navbar module? - reactjs

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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