Cannot find module xxx

[DarkLite1]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Windows Server 2016
• Vetur version:
• VS Code version:

Problem

The error message "cannot find module 'components/models'" is displayed within vscode although the file is clearly there.. When running the code with tsc no error is displayed.

Reproducible Case

Simply create a new Quasar project by running quasar create <project> as described here.

Additional info

Following the FAQ I tried to fix it but no luck. The things I've tried are:

• All TS settings within Vetur:

• Enable Vetur: Use Workspace Dependencies

• Reinstall the Vetur extension

Files

models.ts

export interface Todo {
  id: number;
  content: string;
}

export interface Meta {
  totalCount: number;
}

CompositionComponent.vue

<template>
  <div>
    <p>{{ title }}</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id" @click="increment">
        {{ todo.id }} - {{ todo.content }}
      </li>
    </ul>
    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
    <p>Active: {{ active ? 'yes' : 'no' }}</p>
    <p>Clicks on todos: {{ clickCount }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
import { Todo, Meta } from './models';

function useClickCount() {
  const clickCount = ref(0);
  function increment() {
    clickCount.value += 1
    return clickCount.value;
  }

  return { clickCount, increment };
}

function useDisplayTodo(todos: Todo[]) {
  const todoCount = computed(() => todos.length);
  return { todoCount };
}

export default defineComponent({
  name: 'CompositionComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    todos: {
      type: (Array as unknown) as PropType<Todo[]>,
      default: () => []
    },
    meta: {
      type: (Object as unknown) as PropType<Meta>,
      required: true
    },
    active: {
      type: Boolean
    }
  },
  setup({ todos }) {
    return { ...useClickCount(), ...useDisplayTodo(todos) };
  }
});
</script>

Config

@quasar/app/tsconfig-preset/tsconfig-preset.json

{
  "compilerOptions": {
    "allowJs": true,
    // `baseUrl` must be placed on the extending configuration in devland, or paths won't be recognized
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    // Needed to address https://github.com/quasarframework/app-extension-typescript/issues/36
    "noEmit": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "target": "es6",
    // Quasar-defined webpack aliases
    "paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"]
    },
    // Forces quasar typings to be included, even if they aren't referenced directly
    // Removing this would break `quasar/wrappers` imports if `quasar`
    //  isn't referenced anywhere, because those typings are declared
    //  into `@quasar/app` which is imported by `quasar` typings
    "types": ["quasar"]
  },
  // Needed to avoid files copied into 'dist' folder (eg. a `.d.ts` file inside `src-ssr` folder)
  // to be evaluated by TS when their original files has been updated
  "exclude": ["/dist", ".quasar", "node_modules"]
}

ts.config.json

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
  }
}

Thank you for your help.

[bekalshenoy]

use ./components/models

[DarkLite1]

Thanks for the tip. Same problem I'm afraid:

[DarkLite1]

I've created a repository here. You can see the underlined text in the file /pages/Ticket.vue:

Thank you for having a look at this.

[bekalshenoy]

use import { useAccount } from '@comp-functions/useAccount' instead

[bekalshenoy]

Thanks for the tip. Same problem I'm afraid:

use @components/models or ../components/models

[bekalshenoy]

@ = ./src/

[DarkLite1]

It only seems to not underline it when using this:

import { useAccount } from '../comp-functions/useAccount'

But when using the webpack aliasses it's still underlined as incorrect:

import { useAccount } from 'src/comp-functions/useAccount'

[bekalshenoy]

@ is the alias. use @ instead of every src/. it is also short

[bekalshenoy]

You Are Doing Correct But Your IDE Do Not Support Quasar So It Under Lining

[DarkLite1]

In the Quasar Framwework default aliases src is an alias for /src:

The src webpack alias works perfectly fine but is not recognized by Vetur. So I blieve the issue lies within Vetur? The only import that is not underlined by Vetur is the last one, which is not a webpack alias but a relative path:

It seems like Vetur does not resolve the WebPack alias.

[bekalshenoy]

use

"baseUrl": "./",
"paths": {
      "src/*": ["./src/*"],
      "app/*": ["./*"],
      "components/*": ["./src/components/*"],
      "layouts/*": ["./src/layouts/*"],
      "pages/*": ["./src/pages/*"],
      "assets/*": ["./src/assets/*"],
      "boot/*": ["./src/boot/*"]
    },

instead of

"paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"]
    },

[DarkLite1]

Trying to find that file....

[DarkLite1]

No luck, I tried to clone my project on anther machine which has a stable vs code and I still have the same issue. Weird... can't seem to figure it out what is causing this.

[bekalshenoy]

Trying to find that file....

@quasar/app/tsconfig-preset/tsconfig-preset.json

[DarkLite1]

Yes, thank you. I found it but it didn't fix the problem I'm afraid.

[DarkLite1]

So things I've tried are:

• Updatting "tsconfig.json" to the following:

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "paths": {
      "src/*": ["./src/*"],
      "app/*": ["./*"],
      "components/*": ["./src/components/*"],
      "layouts/*": ["./src/layouts/*"],
      "pages/*": ["./src/pages/*"],
      "assets/*": ["./src/assets/*"],
      "boot/*": ["./src/boot/*"]
    },
  }
}

• Run yarn in the folder 'C:\Users\xxx\.vscode\extensions\octref.vetur-0.24.0' as explained in the FAQ.

No luck, still trying to fix this squiggly line underneath the import path.

[DarkLite1]

I think my issue is related to 890, .424 and 815.

[yoyo930021]

tsconfig.json and #424

[YuhangGe]

I have created a very simple hello-world project using vite-creat-app : npm init vite-app hello-vite --template vue-ts.

https://codesandbox.io/s/c66r7

But vetur report Cannot find module '/@/service' or its corresponding type declarations. in src/components/HelloWorld.vue.

[yoyo930021]

I have created a very simple hello-world project using vite-creat-app : npm init vite-app hello-vite --template vue-ts.

https://codesandbox.io/s/c66r7

But vetur report Cannot find module '/@/service' or its corresponding type declarations. in src/components/HelloWorld.vue.

I look it's working fine.
If you set tsconfig.json, please restart vue language server or restart editor.

[HarisSpahija]

it is not working fine @yoyo930021, codesandbox does not include vetur. I can reproduce the same issue cloning the project to local vscode

[yoyo930021]

it is not working fine @yoyo930021, codesandbox does not include vetur. I can reproduce the same issue cloning the project to local vscode

You can provide a repro project.
So far, I still haven’t encountered a really unusable case.

Mostly, no tsconfig.json in open project root,
Or change tsconfig.json but no restart.

[likeswinds]

maybe this is problem

[yoyo930021]

maybe this is problem

Please follow #2377

[yoyo930021]

I have created a very simple hello-world project using vite-creat-app : npm init vite-app hello-vite --template vue-ts.

https://codesandbox.io/s/c66r7

But vetur report Cannot find module '/@/service' or its corresponding type declarations. in src/components/HelloWorld.vue.

Ha, I find some problem about this case.
Fixed in #2525

[armenr]

Still having this issue with Vetur v v0.32.0

[xingyesh]

still occur the error on v0.33.1
@yoyo930021

[mathmul]

To whom it may concern.

In my case I had a completely decouple Vue app inside my Laravel app in /public/MyVueApp/ and I experienced the same problem as OP (albeit for a different reason).

All I had to do is open the Vue app root folder as a new project in VSCode, and everything worked fine after that.

[imrim12]

Make sure to use workspace version of TS in VSCode so that it loads local TS plugins.
Refer to this comment: vitejs/vite#965 (comment)

With VSCode, you can select your workspace TS Version: