Type error: Could not find a declaration file for module 'country-flag-emoji-polyfill'

[pete-willard]

Hi Egbert! I switched the moduleResolution flag in tsconfig from node to bundler and I'm getting the following error:

Type error: Could not find a declaration file for module 'country-flag-emoji-polyfill'. '(...)/node_modules/.pnpm/country-flag-emoji-polyfill@0.1.4/node_modules/country-flag-emoji-polyfill/dist/index.modern.js' implicitly has an 'any' type. There are types at '(...)/node_modules/country-flag-emoji-polyfill/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'country-flag-emoji-polyfill' library may need to update its package.json or typings.

[eteeselink]

Could you try to debug it? Eg edit the package.json (right there in your node_modules/country-flag-emoji-polyfill) until it works?

And does it then still work when you change moduleResolution back to node?

Full disclosure, I’m no npm packaging guru so I would appreciate any help I can get

[pete-willard]

Neither am I 😅 I know it (npm packaging) can be a nightmare to get right though. Anyway, the error does go away when I get back to node. I'll fiddle around some more tomorrow. I'll get back to you if I find out something.

Some quick google results:

• https://stackoverflow.com/a/76212193
• https://www.typescriptlang.org/docs/handbook/esm-node.html#packagejson-exports-imports-and-self-referencing
• https://github.com/microsoft/TypeScript/issues/52363

[pete-willard]

Ok, I got it to work. Here's what I did:

• changed index.module.js extension to .mjs
• created index.d.mts and copied the types from index.d.ts there (a reexport would also work I think)
• added an exports section to the polyfill's package.json:

  "exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.mts", // put types first
      "default": "./dist/index.module.mjs"
    },
    "require": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.cjs"
    }
  }
  },

• updated "module": "./dist/index.module.mjs" to point to the .mjs
• added "index.d.mts" to files array

I'm not completely sure if all of these steps are necessary/correct, so take that as you will.

Some extra reading:

• lib type checker made by a TS maintainer: https://arethetypeswrong.github.io/?p=country-flag-emoji-polyfill%400.1.4
• https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/UntypedResolution.md
• the TS maintainer gives some insight in a similar case here: https://github.com/gxmari007/vite-plugin-eslint/pull/60

Hope this helps!

[juanparati]

I am also facing this issue using bundler as module resolution.

[eteeselink]

I'm not sure how to solve this and I would appreciate PRs.

Thing is, @pete-willard's suggestions look nice but I worry that what fixed it for him may break things for others (including ourselves). Eg the nonstandard file extensions (or at least I'm not even sure how standard they are, just, it's Node-specific maybe?) Stuff like that. I haven't yet found a comprehensive guide about best practices for this stuff, ie how to package a library such that it works in all common bundlers, compilers and toolchains, and I'd appreciate some help.

Unfortunately I do not currently have the time to get to the bottom of this myself (eg try all popular bundlers with all popular settings and mess around until it works everywhere - that's a big project for a small polyfill).

[eteeselink]

I'm closing this issue for lack of responses. I'm eager to address this but I'm not sure how and I currently lack the time to dive deep enough. Anyone, feel free to reopen if you run into this and/or know a robust solution!