Typescript cannot find module using @ root path syntax in a project created from create-vue

pholly commented 2 years ago

I've got a weird one. Originally posted in https://github.com/vuejs/create-vue/issues/35

Summary

When creating a project in the new recommended way using npm init vue@3, @ root path imports show an error in .vue files. @ root path imports work fine inside .ts files. The strange thing is others haven't been able to reproduce my problem. See the issue mentioned above.

Setup

Visual Studio code - up to date Vue Language Features (Volar) - v0.31.1 TypeScript Vue Plugin (Volar) - v0.31.1 Windows 11

Steps to reproduce

npm init vue@3
Typescript support: yes
Everything else: no

pnpm install (or npm install)

Open App.vue and change an import to use @/ root path syntax. E.g. import TheWelcome from '@/components/TheWelcome.vue'. I get an error: Cannot find module '@/components/TheWelcome.vue' or its corresponding type declarations.ts(2307)

Things I tried

Disabling all other plugins
Uninstalling/reinstalling Volar plugins
Enabled Take Over Mode

xiaoxiangmoe commented 2 years ago

@pholly Can you give a minimal reproducible demo?

Can you try to reproduce it in a new VSCode environment? For example:

install Visual Studio Code Insiders https://code.visualstudio.com/insiders/
install latest Vue Language Features and TypeScript Vue Plugin
open your minimal reproducible demo
see if there also exist some ts error

olemarius commented 2 years ago

Rolling back from 0.31.1 to v0.30.6 worked for me.

pholly commented 2 years ago

@xiaoxiangmoe the easiest reproducable demo is to use npm init vue@3 and choose TypeScript and no to every other option then change an import inside App.vue to use @/ syntax instead of relative path.

I tried Visual Studio Code Insiders:

No error now in App.vue - @/ root path syntax works
Now I get a cannot find module error in main.ts on import App from '@/App.vue'. The @/ syntax works for non .vue imports, like if I try to import another TypeScript file.

@olemarius rolling back to v0.30.6 didn't work for me - I still get the error in App.vue.

xiaoxiangmoe commented 2 years ago

@pholly

Do you install https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin ？

pholly commented 2 years ago

@xiaoxiangmoe yes sorry I installed both extensions

johnsoncodehk commented 2 years ago

@pholly can you reproduce this problem in https://github.com/johnsoncodehk/volar-starter?

pholly commented 2 years ago

@johnsoncodehk yes same problem. I also get an error in main.ts when using @/ syntax on import of a vue file. Relative paths work in both cases. Screenshots below.

johnsoncodehk commented 2 years ago

@pholly have you try config "paths": { "@/*":["./src/*"] }, in tsconfig on the project?

pholly commented 2 years ago

@johnsoncodehk just tried. Still same errors in both. Also the error in main.ts prevents the app from running (starting the dev server). If I fix main.ts, the site builds and runs but the error in App.vue shows up immediately in the browser.

I also tried closing and reopening VS Code.

Let me know if there's anything else you want me to try.

xiaoxiangmoe commented 2 years ago

It seems that Windows will not allow use "paths": { "@/*":["src/*"] },, try change it to "paths": { "@/*":["./src/*"] },.

johnsoncodehk commented 2 years ago

@pholly I can't reproduce this problem and I think it's related to your system, please try @xiaoxiangmoe's suggestion.

If still not working, you can use live share with me so I will able to check the problem. You can join volar discord server(https://discord.gg/5bnSSSSBbK) to find me.

pholly commented 2 years ago

No errors in either main.ts or App.vue! I mistakenly put the paths line outside of compilerOptions. When I moved it there both errors went away. Yes I have to specify ./src/* like you both mentioned. If I put just src/* an error shows that the baseUrl is not specified.

I still get the error in App.vue in a project created from vue init vue@3 (create-vue). BaseUrl is specified in compilerOptions and even if I change path to `./src/* I still get the error.

Let me know how I should proceed - go back to my issue in create-vue project?

johnsoncodehk commented 2 years ago

@pholly if the path option generated by create-vue you should report there.

pholly commented 2 years ago

@johnsoncodehk sorry although I don't get errors when viewing main.ts or App.vue in VS Code, I get errors when trying to run the app with npm run dev.:

[vite] Internal server error: Failed to resolve import "@/App.vue" from "src\main.ts". Does the file exist?

Likewise I get an error in App.vue if I fix the path in main.ts to be relative.

I'll reach out to you on volar's discord. Thanks for all your work and help.

johnsoncodehk commented 2 years ago

@pholly tsconfig only for IDE, you should config resolve.alias in vite.config for vite.

alexvoedi commented 2 years ago

I have the same problem. Something I noticed:

In newly created *.vue files VS Code does not find tsconfig.json.

johnsoncodehk commented 2 years ago

@alexvoedi make sure you have add your vue files to include option of tsconfig: https://github.com/johnsoncodehk/volar-starter/blob/7a4b2f99103f5eab0bad76365be841f264623211/tsconfig.json#L14

alexvoedi commented 2 years ago

Everything is set up correctly in my project. Vetur works fine, Volar does not. This has only been a problem for a few days.

johnsoncodehk commented 2 years ago

@alexvoedi could you provide minimal reproduction?

pholly commented 2 years ago

@johnsoncodehk I have the same problem as @alexvoedi in .vue files in projects created from create-vue. "src/**/*.vue" is definitely in include in tsconfig.

tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
  },
  "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"]
}

xiaoxiangmoe commented 2 years ago

@pholly could you provide minimal reproduction?

pholly commented 2 years ago

@xiaoxiangmoe I can't reproduce anymore - npm init vue@3 works now. I just tried it 3 times and in all 3 projects tsconfig was recognized in .vue files. The screenshot above was from the same command a few days ago. I see that create-vue npm package was just updated a few hours ago - maybe that's why I have no issue now.

@johnsoncodehk I have no problems with projects created from create-vue now.

Thank you both.

coader commented 2 years ago

I have the same problem. Something I noticed:

In newly created *.vue files VS Code does not find tsconfig.json.

also got this tips everything works fine before I use monorepo structure

mattiaz9 commented 2 years ago

if I have a component named home.vue doesn't recognize the tsconfig, but with any other name it does.

moreant commented 2 years ago

I have the same problem. Looks like tsconfig is not found.
I have done case renaming of this file and directory, system is windows.

vue files in the same folder are normal

When I move the TempCoverPage.vue file to the "form" folder it works fine

moreant commented 2 years ago

https://github.com/johnsoncodehk/volar/issues/894#issuecomment-1102964298

I deleted the temp folder and then recreated the vue folder. It was normal. At that time, the temp folder with different capitalization appeared in the git commit. I'm guessing it might have something to do with this

pleek91 commented 2 years ago

I have this issue in a project as well. Seems like the alias works if the .vue file doing the importing is either two words, or lowercase its fine.

button.vue - alias works ButtonSection.vue - alias works Button.vue - alias does not work

mollyxfma commented 2 years ago

I got same problem recently, without any update in my project.

mollyxfma commented 2 years ago

when i disable volar and use vetur, typescript errors disappeared

gitlilimin commented 2 years ago

I have the same problem, i have not change any file, it was normal to open it yesterday, but now this problem happened.

This is a windows10 PC, volar auto update to v0.38.7

the problem looks like:

in .ts file, import xx from "@/xxx" is right
in .vue file, import xx from "@/xxx" is wrong
tsconfig.json filled in the correct settings
project can be "dev" without any error
project can be "build" without any error
all project occur same problem in your VSCode workspace

I try there things:

reload my PC
uninstall VSCode and install it (no any other extensions), and install volar
try vscode-typescript-vue-plugin
try Take Over Mode
try create a new vue project

As an obsessive-compulsive disorder, I feel hopeless...

But in the end, I found the problem. It seems to be related to VSCode workspace when i pick the project to a new VSCode window, it fixed. And when i open it in the old workspace, this problem reappears.

Bad workspace, "../../tsconfig" bad

Good workspace good-takeover

you can see right-bottom, "tsconfig.app.json", It seems that volar read the root directory of the project incorrectly

gitlilimin commented 2 years ago

I found a new phenomenon right now

2 project in 1 workspace, the first project is right, second project wrong

change the project order, result changed

Interesting~

johnsoncodehk commented 2 years ago

@gitlilimin It may related to #1193, #1262 fixing. Could you provide a minimal reproduction?

gitlilimin commented 2 years ago

@johnsoncodehk ok, I tried it, this problem only occur at volar 0.38.8

My environment

PC, windows 10
VS Code:
VS Code extension:

Reproduction steps

clone this repo from https://github.com/gitlilimin/debug-volar-0.38.8, there are 3 project in it

[vue3-create] is create from npm init vue@latest, doc
[vite-create] is create from npm init vite@latest, doc
[old-project] is the project with problems after the update of volar yesterday, it's a real project, i have removed useless code.

you'd better run npm install for there 3 project
open a VS Code window, make sure it's workspace is empty, the window bottom color is blue (not purple)
drag [vue3-create] to VS Code window, and it will looks like
drag [vite-create] to VS Code window, and drag [old-project] to VS Code window
now there 3 project in VS Code window, and there are in same workspace.
open [old-project]/src/views/home.vue and you will look this:

Personal summary

I think this problem must be related to the workspace of vscode, and I'm sure it happened in volar 0.38.8

I found some phenomena in the process of trying to find the problem.

VSCode open a pure project (no workspace), i use above [old-project], it's always right.
in above case, in [vue3-create] project, some component import by "@xxx" can be distinguish, but some cannot (like ).
in [vue3-create]/src/App.vue, tag, put mouse on it can get right tips, but cannot use Ctrl+Click to open it's file.
in [old-project]/src/vies/home.vue, tag can use Ctrl+Click to open it's file. in this file, only and is wrong, becase their path is deeper than others
in a few case, VSCode open [old-project] some .vue file, the right-bottom "tsconfig.json" cannot be read, it's only show "no tsconfig". it's ok when i restart VSCode.

zhangyanwei commented 2 years ago

@gitlilimin Thank you, you saved my time.

wsli10 commented 1 year ago

The vscode right-bottom "No tsconfig" maybe just caused by incorrect include config. ./src/**/*.vue didn't match vue files out of src dir, use ./**/*.vue instead. see tsconfig#include

{
  "compilerOptions": {
    // ...
    "paths": { "@/*": ["./src/*"] } // path alias
  },
  "include": ["./**/*.ts", "./**/*.vue"]
}

saeedtabrizi commented 1 year ago

@johnsoncodehk I have the same problem as @alexvoedi in .vue files in projects created from create-vue. "src/**/*.vue" is definitely in include in tsconfig.

tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
  },
  "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"]
}

This is a good hint . I had same issue but now it's OK . Thanks @olemarius

gitamitdixit commented 1 year ago

@johnsoncodehk @alexvoedi @saeedtabrizi I also had the same issue today after scaffolding a brand new project using vite, it got resolved by simply adding "moduleResolution": "node" in compilerOptions object of tsconfig.app.json

mitar commented 10 months ago

For me it worked after I added to src directory a env.d.ts file with the following:

declare module "*.vue" {
  import type { DefineComponent } from "vue"
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

Stubbs commented 8 months ago

@mitar your solution works for me too, do you know why?

msteen commented 8 months ago

I ran into this issue with my own Volar (not Vue) project and it turned out I had to set baseUrl in compilerOptions for paths to work. I thought this was no longer required due to the TypeScript docs saying:

As of TypeScript 4.1, baseUrl is no longer required to be set when using paths.

joshrincon-aven commented 7 months ago

FYI i noticed for me that adding .vue to the import statement solves the problem for me. more of a short term solution, however.

lorenzyannick commented 3 months ago

Solved by adding a file named "vetur.config.js" at the root of the project

with

module.exports = {
  // **optional** default: `{}`
  // override vscode settings
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true,
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    "./mySubDirWhereTheVueJSProjectIs", // Shorthand for specifying only the project root location
  ],
};

See https://vuejs.github.io/vetur/guide/setup.html#advanced

so1ve commented 3 months ago

You should disable vetur.

lorenzyannick commented 3 months ago

You should disable vetur.

Oh yes ! Vetur is the old version. I didn't even notice. After removing Vetur extension from VSCode it's working well. THX ! (No need vetur.config.js anymore)

Leander-van-Boven commented 1 month ago

The vscode right-bottom "No tsconfig" maybe just caused by incorrect include config. ./src/**/*.vue didn't match vue files out of src dir, use ./**/*.vue instead. see tsconfig#include
{
  "compilerOptions": {
    // ...
    "paths": { "@/*": ["./src/*"] } // path alias
  },
  "include": ["./**/*.ts", "./**/*.vue"]
}

This fixed it for me, apparently the create vue CLI did not add the ./src/**/*.vue to the include while ./src/**/*.ts was

RejownAhmed commented 5 hours ago

@johnsoncodehk @alexvoedi @saeedtabrizi I also had the same issue today after scaffolding a brand new project using vite, it got resolved by simply adding "moduleResolution": "node" in compilerOptions object of tsconfig.app.json

It fixed my pb

vuejs / language-tools