[Bug Report][4.0.4] error TS2882: Cannot find module or type declarations for side-effect import of 'vuetify/styles'.

[Jisu-Woniu]

Environment

Vuetify Version: 4.0.4
Vue Version: 3.5.31
OS: Linux

Steps to reproduce

1. Clone the repo
2. Run pnpm i to install frontend dependencies
3. Run pnpm vue-tsc -b, and see the error

Expected Behavior

Type checking works without errors.

Actual Behavior

vue-tsc (and also vanilla tsc) reports:

src/main.ts:1:8 - error TS2882: Cannot find module or type declarations for side-effect import of 'vuetify/styles'.

1 import "vuetify/styles";
         ~~~~~~~~~~~~~~~~


Found 1 error.

Reproduction Link

https://github.com/Jisu-Woniu/digital-signature/tree/73b316175925b0dbf036d2efe6946cd33d92e4af

Images

[J-Sek]

+// @ts-ignore
import 'vuetify/styles'

[Jisu-Woniu]

This looks like a temporary fix. What is the root cause here?

[KaelWD]

Typescript 6 changed the default value for noUncheckedSideEffectImports to true. You can disable this again for now instead of adding the ignore comment.

[J-Sek]

What's the point of TS accessing styles anyway? IMO, should just do the job (autocomplete while typing in scripts and template) and avoid offsetting gains by wasting developers time with false-negatives. I agree slapping @ts-ignore is not pretty, but it just reflects the tooling fault.

[KaelWD]

microsoft/TypeScript#50394

tsc doesn't know vuetify/styles is a stylesheet, it'd be nice if they just checked for file/exports existence for side effect imports instead of needing a type declaration though.

[Jisu-Woniu]

This explains one of my questions: I can import "vuetify/lib/styles/main.css" but not import "vuetify/styles". Clearly it's a TypeScript breaking change. So maybe I could try "noUncheckedSideEffectImports": false for now? Or is it OK to move the import to my CSS entrypoint?

[Jisu-Woniu]

Having moved import "vuetify/styles" to styles.css as:

@import url("vuetify/styles");

Now everything works fine.