'react-icons' module not found on server-side

[neomusic]

I tried to implements this package on my NextJs project, but with latest version of react-icons the package is not found on server-side.
With 3.2.2 version it works.
I noticed a little difference between 3.2.2 and 3.7.0. The index.mjs is missing. Is related?

NextJs: 7.0.2
React: 16.4.2
Node: 10.14

[Delkathes]

How weird. My Next app was running on dev script. I installed 'react-icons' package. Hot reload implemented it. I got my icons displayed while I was working. But suddenly, after a page refresh or a npm run script refresh, I lost them and the app just couldn't find 'react-icons'

[0str1ch]

I can confirm this behavior, as well. I believe it has something to do with IconContext.Provider.

[exogen]

See comments here: #230 (comment)

It's because of the double-package.json approach that react-icons uses, which is supported by webpack but not Node.

[hwangar]

Same here... if it helps last version usable is 3.6.0: 3.6.1 crashes and I confirm too it's sth with IconContext.Provider

[AslamPangestu]

I have the same issue to. But, first i have trouble with styled-component when first render is not applied. when i use this tutorial, it's work
https://dev.to/aprietof/nextjs--styled-components-the-really-simple-guide----101c

[shatodj]

The same here trying to work with Parcel bundler running my compiled server.ts :(

[olaj]

Same here. Is there any workaround for this? Guess i will survive without this feature though.

[schnerd]

Minimal reproduction:
https://github.com/schnerd/react-icons-issue

Running require('react-icons'); in node.js throws a fatal error. Requiring individual icons works fine, so it seems like this only affects developers who need to import top-level things like IconContext or Typescript types during server-side rendering.

@exogen's hypothesis in #230 (comment) seems accurate. I attempted consolidating the two package.json files and it seemed to resolve the issue in my project, although maybe it has unintended side effects: schnerd@df4e9f2

@kamijin-fanta thoughts about this approach? should I open a PR?

[neomusic]

I created a pull-request to solve this issue. I hope it is accepted

Check out my PR

[aepyornis]

I was able to fix the issue importing IconcContext.Provider by simply adding /lib to the import statement.

import { IconContext } from "react-icons" fails with the error Cannot find module 'node_modules/react-icons/lib'. Please verify that the package.json has a valid "main" entry

Importing IconContext from react-icons/lib worked for me:

import { IconContext } from "react-icons/lib" 

[jacobhixon47]

Can confirm this issue is still happening, and that the above solution of appending /lib to the react-icons import statement works for me as well.

A little worried that when a fix gets merged, it'll break the /lib workaround, but I'll cross that bridge when I get there I suppose.

Edit: This scenario mentioned by @Delkathes is exactly how I experienced the bug:

How weird. My Next app was running on dev script. I installed 'react-icons' package. Hot reload implemented it. I got my icons displayed while I was working. But suddenly, after a page refresh or a npm run script refresh, I lost them and the app just couldn't find 'react-icons'

[kamijin-fanta]

resolved in #273