[Bug]: .esm.js is ignored in extensionsToTreatAsEsm

[sabberworm]

Version

27.1.0

Steps to reproduce

1. Set extensionsToTreatAsEsm to ['.esm.js'].
2. Import a path that points to a file named something.esm.js.

Expected behavior

The imported file should be treated as esm.

Actual behavior

The imported file will be treated as CommonJS.

Additional context

AFAICT the culprit is this snippet in packages/jest-resolve/src/shouldLoadAsEsm.ts:

  const extension = extname(path);

  if (extension === '.mjs') {
    return true;
  }

  if (extension === '.cjs') {
    return false;
  }

  if (extension !== '.js') {
    return extensionsToTreatAsEsm.includes(extension);
  }

Which assumes only the last part of the file name needs to be checked against the configured extensions.

Environment

System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Xeon(R) Gold 6152 CPU @ 2.10GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  npmPackages:
    jest: ^27.1.0 => 27.1.0

[SimenB]

That is how file extensions work.

https://en.wikipedia.org/wiki/Filename_extension

html the extension of mysite.index.html

I guess we could add some validation to extensionsToTreatAsEsm failing if there is more than one . present? We could also possibly specify this in the docs?

---

For your use case I recommend using .mjs or .esm.mjs if you really want the .esm there.

[sabberworm]

Of course I would use .mjs. It’s just that some of my dependencies use .esm.js for their ESM build. I don’t want to fork them all and I don’t want to fix them all.
I don’t want to argue semantics of what a file extension is and isn’t. A lot of files nowadays are not just one thing and having endings with multiple dot-separated parts (to use a less divisive term) is not uncommon for this case. Think .tar.gz or .*.j2 (for jinja templates that are also text files of another format).
I would think this would be a really easy fix with only a tiny risk of backwards-incompatibility.

[sabberworm]

That is how file extensions work.
https://en.wikipedia.org/wiki/Filename_extension

Ironically, the article you linked also contains this nugget:

A file name can have no extensions, a single extension, or more than one extension.

(emphasis mine).

[sabberworm]

Also, TypeScript’s tslib uses tslib.es6.js for its ESM build. I would say that’s a pretty common library to have…

---

Of course, jest could also be smart enough to recognize that tslib’s package.json has "module": "tslib.es6.js", indicating that tslib.es6.js is an ESM. But since it doesn’t even recognize the "module" field without a custom resolver (#2702), that’s probably a stretch…

[igneosaur]

We have also come across this issue because Swiper v7 uses .esm.js.

nolimits4web/swiper#4871

[SimenB]

If you use .js, the closest package.json needs to include type: module, this won't change.

Also, TypeScript’s tslib uses tslib.es6.js for its ESM build. I would say that’s a pretty common library to have…

Of course, jest could also be smart enough to recognize that tslib’s package.json has "module": "tslib.es6.js", indicating that tslib.es6.js is an ESM. But since it doesn’t even recognize the "module" field without a custom resolver (#2702), that’s probably a stretch…

Jest respects import export condition (as of https://github.com/facebook/jest/releases/tag/v27.3.0), which tslib uses, together with a package.json with the required type: module.

https://github.com/microsoft/tslib/blob/c827964226e85118e2fd35b1cc68d4a5ad867f39/package.json#L32
https://github.com/microsoft/tslib/blob/c827964226e85118e2fd35b1cc68d4a5ad867f39/modules/package.json

We have also come across this issue because Swiper v7 uses .esm.js.

Almost the same thing, but e.g. swiper/react (https://www.runpkg.com/?swiper@8.0.6/package.json#91) support is only available in Jest 28 (currently alpha.4), ref #9771. Only . subpath is support in v27.3.

[github-actions]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.