IDE and `vue-tsc` errors in templates

[amir20]

Describe the bug

I have the following code:

export const isMobile = useMediaQuery("(max-width: 770px)");

When using this in vue template, VScode shows an error like so:

I have also tested with functions and same error. The error is not there in <script> blocks, just vue template.

My config does have vue enabled.

AutoImport({
      imports: ["vue", "vue-router", "vue-i18n", "vue/macros", "pinia", "@vueuse/head", "@vueuse/core"],
      dts: "assets/auto-imports.d.ts",
      dirs: ["assets/composables", "assets/stores", "assets/utils"],
      vueTemplate: true,
    }),

I am out of ideas.

Reproduction

I haven't created one yet. I can do so if needed.

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.91 GB / 64.00 GB
    Shell: 3.5.1 - /Users/amirraminfar/homebrew/bin/fish
  Binaries:
    Node: 18.8.0 - ~/.n/bin/node
    npm: 8.18.0 - ~/.n/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 104.0.1

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[amir20]

Just a note that this is only happening in VSCode. Build is fine.

[amir20]

I have been debugging this and strangely using a vitesse doesn't produce this problem. So I attempted to make my configurations identical and still no luck. Also this IDE error is only happening on vue template.

tsconfig.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "ESNext",
    "target": "ESNext",
    "lib": ["DOM", "ESNext"],
    "strict": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["vitest", "vite/client", "vue/ref-macros", "vite-plugin-pages/client"],
    "paths": {
      "@/*": ["assets/*"]
    }
  },
  "include": ["assets/**/*.ts", "assets/**/*.vue", "assets/**/*.json", "assets/**/*.d.ts", "assets/auto-imports.d.ts"],
  "exclude": ["dist", "node_modules", "e2e"]
}

vscode settings.json seems similar.

vite.config.ts

AutoImport({
      imports: ["vue", "vue-router", "vue-i18n", "vue/macros", "pinia", "@vueuse/head", "@vueuse/core"],
      dts: "assets/auto-imports.d.ts",
      dirs: ["assets/composables", "assets/stores", "assets/utils"],
      vueTemplate: true,
    }),

Still IDE cannot find those imports.

Has anybody else seen this? I guess my next attempt is slowly add files to the vitess sample app until it's the same.

[amir20]

I have been unable to figure out the problem.

I created https://github.com/amir20/autoimport-bug to show the bug.

git clone https://github.com/amir20/autoimport-bug
cd autoimport-bug
ni
code .

I hope someone else can reproduce this.

[amir20]

I can confirm vue-tsc --noEmit throws the error.

[amir20]

I might be entering some dimension I have never seen before 😅

I noticed npm i works. But removing node_modules and package-lock.json with pnpm i doesn't work.

I am hoping @antfu has an idea at this point. There might be some transitive dep missing that I can't reproduce.

[amir20]

I was able to find the root cause. pnpm doesn't hoist all packages at top. The fix was to add shamefully-hoist=true and I noticed vitesse also has this setting.

I found nothing documented that would explain this. I imagine this would be a problem for majority of users of this page because even vue-tsc fails.

Possible related issues https://github.com/antfu/unplugin-vue-components/issues/177

An update to the documentation would be nice.

[qmhc]

You can try pnpm i -D @vue/runtime-core then restart vscode (maybe a workaround)

[amir20]

Yup, I found that after I did the original solution. Still I am not sure if it is expected to run to this issue. I don't see it documented.

[amir20]

Hmm I was wrong. @vue/runtime-core doesn't seem to work for me. I remember one package might have fixed it. I don't remember which one now.

[qmhc]

Here a reproduction: https://github.com/qmhc/auto-import-test, you can follow the steps in README.