Renamed ESM files to .mjs instead of .js

[activenode]

Hey there. We are using @tabler/icons as a dependency of a dependency.

The setup:

• some-lib using @tabler/icons@latest
• some-lib importing icons via ESM
• Our nextjs package using some-lib

Now there are apparently libraries such as NextJS that have problems detecting sub-dependencies correctly when the imported ESM files aren't named .mjs.

Surely there is work to do on those libraries (being discussed as well here: vercel/next.js#39375 (comment)) but since .mjs is a very common format for ESM, also being used in my own packages such as https://github.com/activenode/react-use-focus-trap/blob/main/package.json#L35 I am herewith recommending the change for the ESM files from .js to .mjs with a Pull Request with only positive impact IMO.

If you have any questions please go ahead.

Sources:

• https://yarnpkg.com/configuration/manifest#module
• https://www.typescriptlang.org/docs/handbook/esm-node.html
• Nextjs fails to detect ESM modules correctly when using exports in package.json vercel/next.js#39375 (comment)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tabler-icons	✅ Ready (Inspect)	Visit Preview	Jan 12, 2023 at 1:22PM (UTC)

[activenode]

Just as a note: As you might see in my referenced repository I have type: "module" set as well. I can add this in this PR as well if you want, it would equally solve the problem but with a different semantic IMO since "type": "module" indicates that you would be working on an ESM basis. I think this would be sensible looking at https://github.com/tabler/tabler-icons/blob/master/icons-react/index.js

But that's on you. I can do both or just the mjs. Both fine.

//edit:

I'd like to add that after a little bit more research this doesn't necessarily seems to be a framework problem but a Node problem as the error is reported by the node:internal esm loader in all issues of mine and all issues found on the net. This is only hardening my proposal of this PR.

vercel/next.js#39375 (comment)

[codecalm]

hi @activenode! I'm working of v2 here: #439, can you implement this solution in v2 library? React version of Tabler Icons will be moved to @tabler/icons-react, so v1 version will no longer be developed :(

[anthonyalayo]

@activenode is right, but I wanted to give a bit more details.

esbuild's docs explain the state of things quite well:
https://esbuild.github.io/api/#main-fields

1. The fields module, main, and browser, were proposals that got used as interim solutions until node figured out what it wanted to do. Bundlers agreed on these proposals, and thats why they work.
2. Node finally came out with its solution, and desired an .mjs extension to signal ESM instead of CJS.
3. Node also came out with an official way to declare ESM vs CJS, exports: https://nodejs.org/api/packages.html#conditional-exports
4. Only webpack 5 supports the exports field (and adoption for v5 is still low)
5. Next.js is building their server side bundle with CJS, regardless of what you specify inside your tsconfig for module. They are only honoring module for the client side bundle.

We'll definitely need .mjs across ESM builds, but I believe the blocker is still on Next right now. Someone can correct me if 5 is wrong.

[activenode]

Thanks for the clarification @anthonyalayo . Really helpful on top of mine. I will open a PR as @codecalm requested however I figure it might still be sensible to merge this one?

[codecalm]

@activenode if you can implement it in v2 I'll be very gratefull :)

[activenode]

Closing this in favor of a potential new PR