Declaration file not found with Node16 module + moduleResolution

[karlhorky]

Hi @tricinel 👋 Happy new year! Hope you are well.

I have been experimenting with the "module": "Node16" option in tsconfig.json recently and found the declaration file for highlight-words cannot be found when using these options:

Demo on StackBlitz (run yarn tsc in the terminal to get the error):

https://stackblitz.com/edit/node-gwywi8?file=package.json,tsconfig.json,yarn.lock

Error

The error message:

$ yarn tsc
index.ts:1:28 - error TS7016: Could not find a declaration file for module 'highlight-words'. '/home/projects/node-gwywi8/node_modules/highlight-words/dist/highlight-words.mjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/highlight-words` if it exists or add a new declaration (.d.ts) file containing `declare module 'highlight-words';`

1 import highlightWords from 'highlight-words';
                             ~~~~~~~~~~~~~~~~~


Found 1 error in index.ts:1

error Command failed with exit code 2.

Code

tsconfig.json

{
  "compilerOptions": {
    "module": "node16",
    "moduleResolution": "node16",
    "noEmit": true,
    "strict": true
  },
  "include": ["index.ts"]
}

package.json

{
  "name": "node-starter",
  "version": "0.0.0",
  "type": "module",
  "dependencies": {
    "highlight-words": "^1.2.1",
    "typescript": "^4.9.4"
  }
}

index.ts

import highlightWords from 'highlight-words';

console.log(highlightWords);

[karlhorky]

Workaround

It seems that duplicating dist/highlight-words.d.ts to dist/highlight-words.d.mts is one resolution for this issue. I used patch-package to apply this temporarily for my project until there is a proper fix.

Alternative solution

Maybe using the "exports" or "types" fields in package.json may offer a simpler way of doing it without as much duplication...

[tricinel]

Hi @karlhorky! Thanks for recreating this :)

It seems that node16 for moduleResolution is only available from Typescript 4.7 onwards (https://www.typescriptlang.org/tsconfig#moduleResolution). I've not moved highlight-words to that version yet. When I will, this problem should go away (but I will also make sure your issue actually goes away as well).

I'll keep this issue open until then.

[karlhorky]

Ok, although I'm not sure if that's the best solution, since highlight-words is broken already now for consumers with TypeScript 4.7+ and this option (TS 5.0 will be coming out soon, so 4.7 is not all that new anymore).

@andrewbranch also mentioned over here that also providing *.d.mts files is the correct solution for library declaration files:

postcss/postcss#1814 (comment)

[tricinel]

Still related to Typescript 4.7+, what am I missing? I'm just saying I haven't updated to 4.7+ (and 5.0 is in beta, which I won't migrate to any time soon).

[karlhorky]

What I mean here is that other users may be using versions newer than the version of TypeScript that is used internally in a library. And these newer versions should be supported, even if the library itself does not internally use this newer version yet.

[karlhorky]

I think my suggestion above of duplicating the dist/highlight-words.d.ts file to dist/highlight-words.d.mts is pretty low effort way of getting a working version published, without having to upgrade highlight-words to TS 4.7.

[tricinel]

Give this a try, if you want: https://www.npmjs.com/package/highlight-words/v/1.2.2-beta.0. The problem is...the tsc error goes away, but you still don't have declarations. It will complain highlightWords is not callable.

So still working on it, but it's not a priority right now.

[karlhorky]

Oh nice, thanks!

Just took a look, did you mean to also publish the dist/highlight-words.d.mts file I mentioned above in this version?

I don't see it in the unpkg file explorer for highlight-words@1.2.2-beta.0:

[tricinel]

Nope, but in package.json, we have the types prop for exports:

"exports": {
    ".": {
      "types": "./dist/highlight-words.d.ts", <-----
      "require": "./dist/highlight-words.js",
      "default": "./dist/highlight-words.mjs"
    }
  }

which should do the same thing, as far as I understood.

[andrewbranch]

It’s not the same thing—see the explanation under “Types are CJS, but implementation is ESM” at https://github.com/arethetypeswrong/arethetypeswrong.github.io.

[tricinel]

Thanks both! I must admit, I am not familiar with all these since I can't dedicate 100% of my time to it - day job and all you know.

Give highlight-words@1.2.2-beta.1 a try though.

[karlhorky]

highlight-words@1.2.2-beta.1 seems to work for my project with "module": "node16", thanks!

I guess we should leave this issue open until there's a non-beta version published?