react icons not working

[pullmann4rent]

What version of Remix are you using?

2.0.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

I want to use react icons

Expected Behavior

but got this error:

Actual Behavior

Error: Directory import 'C:\render\my-remix-app\node_modules\react-icons\fa' is not supported resolving ES modules imported from C:\render\my-remix-app\build\index.js
Did you mean to import react-icons/fa/index.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:320:17)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

[machour]

Hey @pullmann4rent, could you show how you import and use the icons ?

[mansarip]

I faced the same problem but got it working by importing it this way, eg:

import { SiWindows11 } from "react-icons/si/index.js";  ✅

instead of the 'usual' method:

import { SiWindows11 } from "react-icons/si";  ❌

File format: tsx

[kalilsub]

You have to add serverDependenciesToBundle inside your remix.config:

export default {
      ignoredRouteFiles: ['**/.*'],
      serverDependenciesToBundle: [/^react-icons/],
    };

Hope this helps :)

[jfavrod]

I'm using the latest version of remix (npx create-remix@latest) and I still cannot use react-icons. First, the remix plugin configuration doesn't have serverDependenciesToBundle specified. If I force add it, things still don't work. I get the following error.

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

I've also tried using the @react-icons/all-files package, and still no dice.

[machour]

how are you importing the icon ?

[jfavrod]

Like so: import {FaBars} from 'react-icons/fa'
I also tried with the @react-icons/all-files package (e.g. import { FaBeer } from "@react-icons/all-files/fa/FaBeer";) per the react-icons docs.