ESM Support about highlight-words

[tricinel]

Cool, exports seems to fix that. I will have another look to make sure nothing else breaks and fix it. Thanks!

[tricinel]

Alright, this is a bit new and experimental, so let's see. Could you try the beta and see if that solves it for you? Doing the same as well.

npm install [email protected]

[tricinel]

FYI: https://replit.com/@tricinel/DecimalSociableDegrees

[tricinel]

Alright, great! 1.1.1 is just out.

[karlhorky]

Live demo (click the Run button at the top):

https://replit.com/@karlhorky/DecimalSociableDegrees#.replit

[karlhorky]

Wonder if the esModuleInterop option is necessary in tsconfig.json: https://www.typescriptlang.org/tsconfig#esModuleInterop

---

And maybe, allowSyntheticDefaultImports can also be removed:

Enabling esModuleInterop will also enable allowSyntheticDefaultImports.

[tricinel]

Thanks! I need to take a look at this :)

[tricinel]

Hmm...so as far as I understand this (and I'm not an expert) is that node ships with support for esm modules going forwards (great). If you set type: module in your own package.json, then your code is a module and importing non-module will give an error.

As you said, you found a workaround, but it's not the only one.

At the moment, we're generating both esm and commonjs bundles, so the bundler you're using will pick whichever is most appropriate. Both rollup and webpack have support for the "module": "dist/highlight-words.mjs" field in the package.json file. So if you run your code through a bundler, it will work just fine.

If you want to use highlight-words inside node and in a module, like you are, then you need to import the correct file. Node itself will look at importing whatever is the main file declared in the package's package.json. And at the moment, for highlight-words, that is the commonjs bundle. I won't change it for the time being as that might break a whole array of things for others.

The correct file to load would be, in your case:

import highlightWords from 'highlight-words/dist/highlight-words.mjs';

Then use it naturally. I know this is a bit of a pain and I feel you :( When node announced the esm support, they also promised to keep working on providing a good way to have dual commonjs/esm modules. Their announcement is here.

I hope this clears some things up...Of course, if you find a better workaround or a better build setup that covers both commonjs and esm, I'm all for it :)

[karlhorky]

Ok, so there is no standardized field in package.json for use with Node ESM without a bundler yet?

I guess adding this import line to the readme would be good...

[karlhorky]

Also getting an error with that workaround you posted:

Cannot find module 'highlight-words/dist/highlight-words.mjs' or its corresponding type declarations.

[karlhorky]

Btw, for more information, this doesn't seem like it's an issue with any of the other libraries that I'm using (I have a long list of dependencies).

[karlhorky]

Ah, seems like the correct field name is not module, it's exports:

sindresorhus/p-reduce@d36cb78#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R14

[karlhorky]

Confirmed, beta version works, also in our app 👍

[karlhorky]

Great, thanks!