"Cannot use import statement outside a module" when loading from ESModules package

[Alduino]

Bug report

Description / Observed Behavior

When I import SWR from a package using ESModules (type is set to "module" in the package.json), it fails to load SWR with the error in the title. For me this is specifically happening with a wrapper library for swr that I'm using, which uses ESM.

I think that this is because the esm build of swr is using the extension .esm.js not .mjs, so Node doesn't realise it is using ESM (even though it is under import in the exports object in swr's package.json, which might be a bug with node). In fact, renaming the entrypoint from index.esm.js to index.mjs fixes the issue.

The 0.5 build (which works) doesn't use exports so Node will be importing the CJS build, which is probably why that version works.

Expected Behavior

The library should import fine, without Node complaining that it is using import statements.

Repro Steps / Code Example

All you need to do is import useSWR from swr in a package that requires swr>=1.0.0 and has its type set to module:

// index.js
import useSWR from "swr";

// package.json
{
  "type": "module",
  "dependencies": {
    "swr": "^1.1.2"
  }
}

Additional Context

SWR version: 1.1.2 (seems to effect every version >=1.0.0)
Node verison: 14.17.6 (although it doesn't work on 16.13.1 too)

[huozhi]

There're some bundler doesn't support mjs well yet, such as metro. so we reverted the mjs extension change in #1618.
You can check out the related issues for more details.

[Alduino]

Aah, that's annoying.

I would expect everything that supports the exports object to be able to support mjs files, so maybe an alternative solution that works with both is to use .esm.js files for the module and .mjs files for the exports, though I don't know of an easy way to get bunchee to support that from my quick looks at it.

[Alduino]

I've just tried setting up a basic CRA project using swr with .mjs and interestingly it imports perfectly fine (although it is complaining about hook issues, though that is probably just because I'm using a version of link:..). That's using the typescript template and (a) adding a useSWR call in the App component or (b) wrapping all the JSX in the app with <SWRConfig /> .

A bit annoying though that it works fine because it means I can't test my theory with CRA.

[huozhi]

I would expect everything that supports the exports object to be able to support mjs files, so maybe an alternative solution that works with both is to use .esm.js files for the module and .mjs files for the exports

Sounds like a good idea. I can try to see if there's any workarounds for it 🙏

[shuding]

https://twitter.com/antfu7/status/1476438919000772609 there’re some discussions in this thread that might be helpful.