Remix doesn't import `.mjs` files, when defined without extension.

[axieum]

Reproduction

1. Create an .mjs file with some js
2. Import like you normally would import something, like import MyModule from "./my-module";
3. See it throws an error. "Cannot find module"

https://stackblitz.com/edit/github-nv3shlgq

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (4) x64 AMD EPYC 7763 64-Core Processor
    Memory: 16.74 GB / 21.95 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (139.0.3405.86)
  npmPackages:
    @react-router/dev: 7.7.1
    @react-router/fs-routes: 7.7.1
    @react-router/node: 7.7.1
    @react-router/serve: 7.7.1
    lucide-react: 0.544.0
    react-router: 7.7.1
    react-router-devtools: 5.0.6
    vite: 6.3.5

Used Package Manager

npm

Expected Behavior

Remix should import .mjs files if it won't find a .js file.

Actual Behavior

Throws error: "Cannot find module"

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. This should help us to focus on actionable issues and be more responsive to newly filed issues.

To get this re-opened, please add a reproduction to the Issue description and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

Or, if this was closed by mistake and there is a valid reproduction, please ensure that it is linked in the Issue description and and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

If you have any questions, you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[axieum]

@brophdawg11 @brookslybrand I have attached a StackBlitz reproduction link. https://stackblitz.com/edit/github-nv3shlgq?file=app%2Froutes%2Fhome.tsx

[brophdawg11]

Are you sure this isn't an issue with that specific package? .mjs files work fine in this repro: https://stackblitz.com/edit/github-nv3shlgq-tftnyfzz?file=app%2Froutes%2Fhome.tsx

[timdorr]

You can just change your import to import { DynamicIcon } from 'lucide-react/dynamic.mjs';. Works fine in your example after a reload.

[axieum]

Yeah it works, but make sure you also add a @ts-expect-error above the import line or TypeScript won't like it. This is how I've worked around it until fixed in either Lucide or RRv7.

Lucide have previously said it's an issue in Remix/RR.

[timdorr]

How modules are imported has nothing to do with React Router. That is at best a Vite issue. However, Lucide should be providing their dynamic module as an export, otherwise this kind of issue is going to occur in other environments as well.