Webpack 5 will not accept duplicated exports names

[korbav]

Describe the problems
create-react-app@next will now be using Webpack 5 instead of Webpack 4.
This brings an increased level of requirements when it comes to exports, react-icons is using the same star exports names for both io and io5 which prevents Webpack to build the app (an exception being thrown).

Minimal sample repository
Any react app using create-react-app@next

Expected behavior
The compilation should not be blocked because of duplicated exports names.

Errors

ERROR in ./node_modules/react-icons/all.js 4:0-22
The requested module './io5' contains conflicting star exports for the names 'IoLogoAndroid', 'IoLogoAngular', 'IoLogoApple', 'IoLogoBitbucket', 'IoLogoBitcoin', 'IoLogoBuffer', 'IoLogoChrome', 'IoLogoClosedCaptioning', 'IoLogoCodep
en', 'IoLogoCss3', 'IoLogoDesignernews', 'IoLogoDribbble', 'IoLogoDropbox', 'IoLogoEuro', 'IoLogoFacebook', 'IoLogoFlickr', 'IoLogoFoursquare', 'IoLogoGithub', 'IoLogoGoogle', 'IoLogoHackernews', 'IoLogoHtml5', 'IoLogoInstagram', 'I
oLogoIonic', 'IoLogoIonitron', 'IoLogoJavascript', 'IoLogoLinkedin', 'IoLogoMarkdown', 'IoLogoNoSmoking', 'IoLogoNodejs', 'IoLogoNpm', 'IoLogoOctocat', 'IoLogoPinterest', 'IoLogoPlaystation', 'IoLogoPython', 'IoLogoReddit', 'IoLogoR
ss', 'IoLogoSass', 'IoLogoSkype', 'IoLogoSlack', 'IoLogoSnapchat', 'IoLogoSteam', 'IoLogoTumblr', 'IoLogoTux', 'IoLogoTwitch', 'IoLogoTwitter', 'IoLogoUsd', 'IoLogoVimeo', 'IoLogoVk', 'IoLogoWhatsapp', 'IoLogoWindows', 'IoLogoWordpr
ess', 'IoLogoXbox', 'IoLogoXing', 'IoLogoYahoo', 'IoLogoYen', 'IoLogoYoutube' with the previous requested module './io'

[EgorKrasno]

CRA v5 has been released, any solutions to this?

[korbav]

If you mean a solution to properly fix it, the most obvious is to derivate all the names of the old IO icons for example this way:

• IoLogoAndroid becomes Io4LogoAndroid
• IoLogoAngular becomes Io4LogoAngular
• And so on..

If rather, you mean a quick patch while a clean definitive solution is released, then I don't see any for now .

[igordeoliveirasa]

+1

[moshcohen110]

did someone found a solution/workaround?

[korbav]

did someone found a solution/workaround?

Well, if you have ejected the Webpack config file from your react app, it seems you could use https://www.npmjs.com/package/file-replace-loader to replace the problematic file node_modules/react-icons/io/index.js on the fly.

If you haven't ejected it yet, there's no way (please correct me if I'm wrong).

Edit 1 : There is actually a way without ejecting webpack: https://www.npmjs.com/package/react-app-rewired

Hopefully, this will be fixed soon as it's quite a serious concern, and it's gonna be more and more problematic by people upgrading create-react-app.

Edit 2: I ended up creating a proxy to access the library : https://github.com/korbav/files/blob/main/react/react-icons/react-icons-proxy.js
It seems to work flawlessly, you can access the problematic icons by adding the "Legacy" suffix, for example, IoLogoAndroidLegacy, IoLogoAngularLegacy and so on. For the icons without any duplicated name, you access them the usual way, still using this proxy.

Instead of importing your icons from react-icons, just do it from react-icons-proxy.

Eg: import { FaVolumeUp, BsBrightnessHigh, IoLogoAndroidLegacy } from '../../proxy/react-icons-proxy';

The lib updates have been on standby for a while though, I'm not sure how often the issues are fetched by the maintainers.

[altcoda]

I have the same problem after updating react, react-router-dom and react-scripts.

[MihailProcudin]

Hi there,

It is because of webpack getting smarter and it began to tree shake the exports in v5, however, the changes which I make doesn't fix the issue which is quite unexpected😭

Lemme share here ...

Line number 4 conflicts with line number 3 because they have the same names defined.

If we go into one of the files io/ or io5/ we notice that the names of the icons are the same. which is actually triggering the error, nevertheless changing the names doesn't fix the issue.

[korbav]

Hi @MihailProcudin, please see the second edit in my post above, it's a working workaround waiting for the library to release a permanent clean fix.

[MihailProcudin]

@korbav Ah, your solutions are amazing 👍
I just removed the package.

[KamalDGRT]

Describe the problems create-react-app@next will now be using Webpack 5 instead of Webpack 4. This brings an increased level of requirements when it comes to exports, react-icons is using the same star exports names for both io and io5 which prevents Webpack to build the app (an exception being thrown).

Minimal sample repository Any react app using create-react-app@next

Expected behavior The compilation should not be blocked because of duplicated exports names.

Errors

ERROR in ./node_modules/react-icons/all.js 4:0-22
The requested module './io5' contains conflicting star exports for the names 'IoLogoAndroid', 'IoLogoAngular', 'IoLogoApple', 'IoLogoBitbucket', 'IoLogoBitcoin', 'IoLogoBuffer', 'IoLogoChrome', 'IoLogoClosedCaptioning', 'IoLogoCodep
en', 'IoLogoCss3', 'IoLogoDesignernews', 'IoLogoDribbble', 'IoLogoDropbox', 'IoLogoEuro', 'IoLogoFacebook', 'IoLogoFlickr', 'IoLogoFoursquare', 'IoLogoGithub', 'IoLogoGoogle', 'IoLogoHackernews', 'IoLogoHtml5', 'IoLogoInstagram', 'I
oLogoIonic', 'IoLogoIonitron', 'IoLogoJavascript', 'IoLogoLinkedin', 'IoLogoMarkdown', 'IoLogoNoSmoking', 'IoLogoNodejs', 'IoLogoNpm', 'IoLogoOctocat', 'IoLogoPinterest', 'IoLogoPlaystation', 'IoLogoPython', 'IoLogoReddit', 'IoLogoR
ss', 'IoLogoSass', 'IoLogoSkype', 'IoLogoSlack', 'IoLogoSnapchat', 'IoLogoSteam', 'IoLogoTumblr', 'IoLogoTux', 'IoLogoTwitch', 'IoLogoTwitter', 'IoLogoUsd', 'IoLogoVimeo', 'IoLogoVk', 'IoLogoWhatsapp', 'IoLogoWindows', 'IoLogoWordpr
ess', 'IoLogoXbox', 'IoLogoXing', 'IoLogoYahoo', 'IoLogoYen', 'IoLogoYoutube' with the previous requested module './io'

+1

I also faced the exact same issue today.

[RomansWorks]

A simple workaround - import the icons from their respective folder instead of from '/all'.

i.e.

import { HiCog } from 'react-icons/hi'

instead of

import { HiCog } from 'react-icons/all'

[JoaoVitorOliMendes]

Same issue solved temporarily with korbav`s proxy workaround, waiting for a definitive solution

[Raman-3r]

i also face this problem can you please suggest me any soluion regarding that

thank you

[RajikaKeminda]

Solution 1

Use Vite builder instead of Webpack

Solution 2

just create a reactIcons.ts file and export only below libraries and then you can import reactIcons.ts file instead of "react-icons/all"

export * from 'react-icons/ci';
export * from 'react-icons/fa';
export * from 'react-icons/io';
export * from 'react-icons/md';
export * from 'react-icons/ti';
export * from 'react-icons/go';
export * from 'react-icons/fi';
export * from 'react-icons/gi';
export * from 'react-icons/wi';
export * from 'react-icons/di';
export * from 'react-icons/ai';
export * from 'react-icons/bs';
export * from 'react-icons/ri';
export * from 'react-icons/fc';
export * from 'react-icons/gr';
export * from 'react-icons/hi';
export * from 'react-icons/si';
export * from 'react-icons/sl';
export * from 'react-icons/im';
export * from 'react-icons/bi';
export * from 'react-icons/cg';
export * from 'react-icons/vsc';
export * from 'react-icons/tb';
export * from 'react-icons/tfi';
export * from 'react-icons/rx';

example:

import * as icons from './reactIcons'

interface IProps {
    iconName: string
}

const ReactIcon = ({iconName}: IProps) => {
    let Icon = _.get(icons, iconName)
    return React.createElement(Icon)
}

export default ReactIcon

 <ReactIcon iconName={'FaReact'} />