Directory import is not supported resolving ES modules when importing react-icons

[offchan42]

I got 'Directory import is not supported resolving ES modules' error when I try to import react-icons package the way react-icons doc suggests me.

// /app/routes/test-icons.tsx
import { FaLock } from 'react-icons/fa' // this line produces error (it's what react-icons doc suggests)
// import { FaLock } from 'react-icons/fa/index.js' // this line doesn't produce error


export default function TestIconsRoute() {
  return <FaLock />
}

1. Is this error expected and appending /index.js the correct workaround?
2. Which code line in Remix activates ES modules and causes me to need to append /index.js?
3. Maybe this is a bit unrelated to Remix, which topic can I learn more about to understand the cause of this error better?

Context: I am using Remix v2.0.0 and I'm a bit new to web dev.

[abdulkader]

This started breaking from v2.0.0. Here is reproducible repo with just basic setup https://github.com/abdulkader/remix-admin-template

[abdulkader]

@off99555 I have resolved the issue by adding the option serverDependenciesToBundle: [/^react-icons/], to the remix.config.js file. You can see same is working on above repo.

[offchan42]

Is this the correct way to fix the issue or is this a workaround?

[aprilmintacpineda]

The issue is still happening today, this worked for me.

[hanqitech]

https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts
I solved the problem according to this ,hope this could help you .

[RabeeAbuBaker]

This has been fixed by react-icons ... just upgrade to v5

react-icons/react-icons#717