ESM usage is broken in intl-messageformat@10.4.0

[remcohaszing]

Which package?

intl-messageformat@10.4.0

Describe the bug

intl-messageformat@10.4.0 package imports resolve to lib/index.js. This is a .js file in a package that doesn’t specify "type": "module". This makes it CJS, but it contains ESM syntax.

To Reproduce

Reproducible Steps/Repo

Steps to reproduce the behavior:

1. Install intl-messageformat@10.4.0

   npm install intl-messageformat@10.4.0

2. Create a script named script.mjs with the following content:

   import 'intl-messageformat'

3. Run it

   node ./script.mjs

4. See error

Expected behavior

Nothing

Screenshots

No screenshot, but a stack trace:

(node:47086) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
node_modules/intl-messageformat/lib/index.js:6
import { IntlMessageFormat } from './src/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1195:20)
    at Module._compile (node:internal/modules/cjs/loader:1239:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v19.9.0

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

The ESM files should be actual ESM. Since everything in the lib directory is ESM, the simplest solution would be to write lib/package.json with the following content:

{
  "type": "module"
}

Alternatively the .mjs extension should be used, and the .mts extension for TypeScript files.

Type definitions need to match as well. To fix this, the "exports" → ".' → "types" field needs to be removed.

Also ESM requires to use file extensions in the import.

[huykon]

I have same issue like this. Please give us the solution or any hot fix for this?

[longlho]

You can pin down the previous version while we investigate
@pyrocat101 do u know wassup with module resolution?

[remcohaszing]

Dual publishing is hard. A lot of people underestimate the details. My general recommendations are:

• Don’t dual publish. Pick CJS for better compatibility, or ESM for moving the JavaScript ecosystem forward. There are really no benefits
• Don’t use star exports if you transpile to CJS
• Don’t use default exports if you transpile to CJS
• Don’t use default exports in ESM, unless you really understand why you shouldn’t use them and think it’s ok for your use case regardless.
• In tsconfig.json, use this configuraton, which is the only valid option for libraries:

  {
    "compilerOptions": {
      "module": "node16",
  
      // This is implied by "module": "node16"
      // "moduleResoluton": "node16"
    }
  }

[semoal]

Same issue here, had to pin to 10.3

[marcovanharten-cpi]

Same here. Is anyone working on this?

[nicholasglazer]

Can confirm, this issue happens to me as well. Switched to 10.3

[huykon]

Yeah I have to force switch back to version 10.3.5

[tianyingchun]

+1 have to switch back to version 10.3.5

[ilovett]

Wasted a bunch of hours on this for vitest config, the inline deps override did not seem to work. Downgrade to 10.3.5 worked like a charm.

[Pagebakers]

(node:47736) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

The ESM module should be published as .mjs instead of .js to fix this.

[pyrocat101]

Apologies for breaking your build. The ESM exports change are not properly tested and I have reverted the change.

The following packages have been marked as deprecated on npm and the newer versions including the revert have been published:

• @formatjs/intl@2.8.0
• @formatjs/fast-memoize@2.1.0
• @formatjs/icu-messageformat-parser@2.5.0
• @formatjs/intl-displaynames@6.4.0
• @formatjs/intl-listformat@7.3.0
• intl-messageformat@10.4.0
• @formatjs/ecma402-abstract@1.16.0
• @formatjs/intl-numberformat@8.6.0
• @formatjs/icu-skeleton-parser@1.5.0

We will figure out a working test strategy for ESM packages next time before we attempt it.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.