bug: Cannot find module '@yeger/vue-masonry-wall' or its corresponding type declarations

[MartinX3]

Affected Packages

• [ ] @yeger/eslint-config
• [X] @yeger/vue-masonry-wall 5.0.8
• [ ] @yeger/vue2-masonry-wall
• [ ] vecti

Description

After using "module": "NodeNext", in the tsconfig.ts and "type": "module" in the package.json using vue-tsc to check my code I get the error:

> vue-tsc --noEmit

src/boot/vue-masonry-wall.ts:2:25 - error TS2307: Cannot find module '@yeger/vue-masonry-wall' or its corresponding type declarations.

2 import MasonryWall from '@yeger/vue-masonry-wall'

Any other 3rd party library I use is working.

Reproduction

https://stackblitz.com/edit/vitejs-vite-martix3-yeger-masonry-bug-270

Additional context

No response

Preferences

• [ ] I want to be assigned to and work on this issue myself

[DerYeger]

Which version is affected? Please provide a minimal reproduction. I cannot reproduce this issue in any of my projects.

[MartinX3]

Thank you for your response. I added the needed information.

[DerYeger]

Thanks for the report!

As far as I can tell, vue-tsc is the issue.

1. exports in package.json are valid, as checked by publint.
2. Adding an identical import to main.ts and running tsc --noEmit reports no errors.
3. "module": "NodeNext" is not the trigger, but the implicit "moduleResolution": "NodeNext" it results in.

If you're using Vite anyway, why not switch to

  "module": "ESNext",
  "moduleResolution": "bundler",

in the first place?

[MartinX3]

Thank you for the answer!

Oh, that means vue-tsc has a bug or that this project violates what NodeNext wants?

I did choose NodeNext because of this:

In addition to adopting the following settings, it’s also recommended not to set { "type": "module" } or use .mts files in bundler projects for now. Some bundlers adopt different ESM/CJS interop behavior under these circumstances, which TypeScript cannot currently analyze with "moduleResolution": "bundler". See issue #54102 for more information.

(Quasar wants "type": "module" soon)

In short, "moduleResolution": "bundler" is infectious, allowing code that only works in bundlers to be produced. Likewise, "moduleResolution": "nodenext" is only checking that the output works in Node.js, but in most cases, module code that works in Node.js will work in other runtimes and in bundlers.

https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html

[DerYeger]

I don't think my library violates the NodeNext spec, since it works fine with tsc, just not vue-tsc.

I also don't think the "infectious" nature of "moduleResolution": "bundler" applies to my library, because it's built using a custom Vite plugin that adds missing file types to imports and exports (see https://www.npmjs.com/package/@yeger/vue-masonry-wall?activeTab=code).

[MartinX3]

Thank you. I switch to ESNext and Bundler to use your plugin. Then also vue-tsc doesn't complain and I can continue to use it. At least I don't need to use node / node10 anymore.

I just wondered why I only get the error message with your plugin. :D