Jest with Node.js v20.11.0 does not understand overlayscrollbars-react

[krutoo]

Hi, i noticed about "module" field in package.json is not standard way to define ESM entry point of package.

According this answer: https://github.com/jestjs/jest/issues/9430#issuecomment-1905771034

Can we update package.json of overlayscrollbars packages for to comply with the standard?

[KingSora]

Good day @krutoo

overlayscrollbars-react package.json looks like this: https://cdn.jsdelivr.net/npm/overlayscrollbars-react@0.5.3/package.json

It defines the exports, main and module fields.

[krutoo]

@KingSora hmmm, for some reason Jest does not understand that this file must be interpreted as an ESM

[KingSora]

@krutoo Would you be able to create an example repository with your jest setup and a library which works with it? I could take a look what could potentially be wrong there.

[krutoo]

@KingSora Here is repo with reproduction of problem: https://github.com/krutoo/jest-esm-overlayscrollbars-react

Just make npm install and npm run test

In my computer i have Node.js v20.11.0

[krutoo]

@KingSora sorry for wrong link, I fixed it

[lpjune]

Also experiencing this issue with Node 20.11

[Smrtnyk]

Do you need maybe "type": "module"?

[KingSora]

@krutoo @lpjune @Smrtnyk I've identified the issue and will publish a fix soon :)

The problem is that even though the package jsons exports field looks like this:

"exports": {
  ".": {
    "require": "./overlayscrollbars-react.cjs.js",
    "import": "./overlayscrollbars-react.es.js",
    "types": "./types/overlayscrollbars-react.d.ts"
  }
}

Jest or node is reading the overlayscrollbars-react.es.js as a commonjs file. The reason being that I have no "type": "module" field and the fileextension of that file does not end with .mjs thus causing it to be read as a commonjs file.

[krutoo]

@KingSora Please also note that the order of the keys matters according to the docs

Conditional exports: https://nodejs.org/api/packages.html#conditional-exports

Node.js implements the following conditions, listed in order from most specific to least specific as conditions should be defined...

[Smrtnyk]

if you set "type": "module" you should not need mjs as extension node will read .js files as es modules by default

[KingSora]

@Smrtnyk Thats true, but it would also read the commonjs files as modules in that case

[ChristophP]

Regaring the extensions

• .mjs is always interpreted as ESM (regardless of the type field of the closes package json up the file tree)
• .cjs is always interpreted as CJS (regardless of the type field of the closes package json up the file tree)
• .js is interpreted as ESM or CJS depending on the type field of the closest package json up the file tree.

In that sense if you have type: module set, the ESM file can be called .js the CJS file .cjs. If you have no type module set or type: commonjs you can do .mjs for ESM and .js for CJS. If you wanna be absolutely sure regardless you can use .mjs/.cjs for them respectively.

[nickserv]

I'd also recommend linting your package with publint.

[KingSora]

@krutoo I'll continue to provide commonjs and module versions because of backwardscompatibility reasons and because some frameworks / tools simply only support one or another but not always both (or the "right" one).

@ChristophP Thank you for the input - really appreciate it!

@nickmccurdy Very useful tool, I'll definitely use it before I publish the fixed versions - Thanks a bunch!

[KingSora]

I've published:

• overlayscrollbars v2.4.7
• overlayscrollbars-react v0.5.4
• overlayscrollbars-vue v0.5.7
• overlayscrollbars-solid v0.5.3
• overlayscrollbars-svelte v0.5.3

Which all address this issue and should hopefully fix it properly. I've used https://publint.dev and https://arethetypeswrong.github.io/ to identifiy additional issues and fixed them where the error / warning was appropriate.

Please try it out and give feedback :)

[krutoo]

@KingSora Yes, it helped in example repo and in my project, thank you so mush

Can you tell me what exactly you did to fix this problem?

Issue can be closed i think

[KingSora]

@krutoo I've changed the package.jsons exports field.. I've described the problem here: https://github.com/KingSora/OverlayScrollbars/issues/604#issuecomment-1907577254

To see exactly how the I changed the files you can compare the old and new versions.