error TS2307: Cannot find module '@vue/reactivity' or its corresponding type declarations.

[bbugh]

trafficstars

Reporting a bug?

When compiling, I am seeing these errors:

Starting compilation in watch mode....yarn/$$virtual/vue-i18n-virtual-8387eb67eb/0/cache/vue-i18n-npm-9.1.6-66ae7003f6-6da7c84c88.zip/node_modules/vue-i18n/dist/vue-i18n.d.ts:3:34 - 
error TS2307: Cannot find module '@vue/reactivity' or its corresponding type declarations.

3 import type { ComputedRef } from '@vue/reactivity';
                                   ~~~~~~~~~~~~~~~~~
.yarn/$$virtual/vue-i18n-virtual-8387eb67eb/0/cache/vue-i18n-npm-9.1.6-66ae7003f6-6da7c84c88.zip/node_modules/vue-i18n/dist/vue-i18n.d.ts:32:42 - 
error TS2307: Cannot find module '@vue/reactivity' or its corresponding type declarations.

32 import type { WritableComputedRef } from '@vue/reactivity';

Module versions (please complete the following information):

• vue: 3.1.2
• vue-i18n: 9.1.6 (@next)

Reproduction Link

You can see the minimum changeset required to cause this (it's basically just installing it)

https://github.com/bbugh/vue-tsx-tailwind-starter/compare/i18n-failure?expand=1

To Reproduce

1. git clone --depth 1 --branch i18n-failure https://github.com/bbugh/vue-tsx-tailwind-starter
2. yarn build
3. Observe the type errors.

Expected behavior

It should compile without an error.

[bbugh]

It looks like @vue/reactivity is missing from devDependencies, but I don't know which package it should go in.

[PeterAlfredLee]

@bbugh I just tested it, npm install and npm run build runs well. This dependency issue might cause by yarn 2, not vue-i18n.

[bbugh]

It does look that way. Yarn 2 works fine, but yarn 2 + pnp results in this issue. Sorry for wasting your time!

[bbugh]

Yarn 2 explained that it's a problem with the repo as is working by design: https://github.com/yarnpkg/berry/issues/3071#issuecomment-872193464

This isn't a bug and is working as expected. [email protected] doesn't declare @vue/reactivity as a dependency and is therefor denied access to it. registry.yarnpkg.com/vue-i18n/9.1.6

[PeterAlfredLee]

Hi @bbugh I investigated a little and found that @vue/reactivity is a dependency of vue, and vue is decleared as a peerDependencies of vue-i18n. IMO putting vue in peerDependencies is reasonable.

Maybe this is caused by yarn2 + pnp + peerDependencies, cause it works fine with yarn2.

[merceyz]

That's an implementation detail and can change so it's not enough to just peer depend on vue and assume you have access to @vue/reactivity. It's relying on hoisting to make it available which isn't guaranteed to be in your favour - https://yarnpkg.com/advanced/rulebook#packages-should-only-ever-require-what-they-formally-list-in-their-dependencies

[PeterAlfredLee]

@merceyz Thank you for your replying. I read the document that you provided, and it says:

If your package is a plugin (for example babel-plugin-transform-commonjs) and the missing dependency is the core (for example babel-core), you would need to instead register the dependency inside the peerDependencies field.

As I understand it, vue-i18n is also a plugin for vue, so is it reasonable to declare vue as peerDependency? (Currently，vue-i18n declare vue as peerDependency) If the answer is no, what is the different ?

[merceyz]

Yeah, that's a valid interpretation but it also needs to declare @vue/reactivity