Cannot find module 'xxxx' when using path mapping

[mei-rune]

• I have searched through existing issues
  I find #545 and #423, but error is still exists.
• I have read through docs
• I have read FAQ

Info

• Platform: Win
• Vetur version : 0.11.7
• VS Code version:1.22.1

Problem

Reproducible Case

npm install -g @vue/cli
vue create explorer
example.zip

[HerringtonDarkholme]

Can you reproduce it in plain TypeScript?

[mei-rune]

@HerringtonDarkholme you open https://github.com/vuejs/vetur/files/1910017/example.zip

[HerringtonDarkholme]

I cannot reproduce it.

[Grewamor]

Same problem here.
Can anybody help?

Without @ it works:

[octref]

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

[Grewamor]

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

same problem 😥

[AtofStryker]

this also seems to be a problem on our end as well

[kinghat]

im getting this as well:

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

this didnt seem to work for me:

// webpack
module.exports = {
  resolve: {
    alias: {
      '@': 'src'
    }
  }
}```

[octref]

@k1nghat I clarified the doc, sorry:

// If you have below Webpack config
module.exports = {
resolve: {
  alias: {
    '@': 'src'
  }
}
}

// You need such tsconfig.json
{
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": [
      "src/*"
    ]
  }
}
}

[kinghat]

i get this when i put it into vue.config.js and try to build:

ERROR Invalid options in vue.config.js: "resolve" is not allowed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[octref]

@k1nghat No, my point was "if you have such webpack.config.js" you need to create a tsconfig.json in your project root. vue.config.js is an abstraction on top of webpack.config.js.

Can you clone this repo https://github.com/octref/veturpack to create a repro case?

[kinghat]

@k1nghat No, my point was "if you have such webpack.config.js" you need to create a tsconfig.json in your project root. vue.config.js is an abstraction on top of webpack.config.js.

Can you clone this repo https://github.com/octref/veturpack to create a repro case?

since the last couple updates pushed recently i havent seen the issue in my project or the cloned veturpack repo.

[octref]

@Grewamor Are you on Windows too?

I start to doubt it's because Windows's specific path handling problem.

[Grewamor]

Yes, windows

[vladfrangu]

I also encounter this issue, but seems like a window reload fixes it, so surely it isn't just Windows being Windows, right? 😅

[nexorianus]

I also encounter this issue, but seems like a window reload fixes it, so surely it isn't just Windows being Windows, right? 😅

A window-reload does fix the Problem!
And it's not only a Windows problem... getting the same behavior on Mac.

[forbjok]

I'm having this issue as well with everything except the .vue modules.
I already have the "@/*" path in tsconfig.json (it was there by default when I created the project, I believe), and no amount of restarting VSCode or even doing "git clean -fdx" and reinstalling npm packages seems to make any difference. Getting the same thing both on my laptop and my desktop machine.

[sermunar]

I am facing this issue as well in .vue files

issue in .vue files

no issue in .ts files

[iliiliili]

same

just for disable this warnings i use direct path

[cyberbit]

I am also experiencing this issue on Mac.

VS Code: 1.35.0
Vetur: 0.21.0

In a typical generated Home.vue:

[waghcwb]

I'm having the same issue, on Windows

[tingzhong666]

I'm having the same issue, on Windows

[tingzhong666]

Brothers, I've found a temporary solution. Turning off this option is not a good way, but it can make the code look good.

[alex88]

Same issue here:

package.json has

  "vue": {
    "configureWebpack": {
      "resolve": {
        "alias": {
          "@": "src"
        }
      }
    }

tsconfig

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

inspected webpack config from vue ui shows

  resolve: {
    alias: {
      '@': 'src',
      vue$: 'vue/dist/vue.runtime.esm.js'

[tingzhong666]

Today, I emptied the vscode workspace. Open a project, and it's normal, no error.

[zxc122333]

The folder client contains a vue project created by vue-cli
The folder empty contains only a empty tsconfig.json

works fine:

Cannot find module '@/components/HelloWorld.vue':

The only difference is order

gif:

[DavidXenakis]

I'm also having the same issue, and haven't found a workaround yet.

tsconfig:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

app.vue:

<script lang="ts">
import * as MyStore from '@/store/mystore'

Yields error
Cannot find module '@/store/mystore'. Vetur(2307)

If anyone finds a fix for this, I'd be super appreciative.

VSCode: 1.36.0
Vetur: 0.21.1
vue: 2.5.16

EDIT:
It looks like the problem resolves if, from VSCode -> File -> Open Folder, I select the root of my Vue app. The Vue app is within a larger monorepo. If I instead Open Folder the folder above the root of my Vue app, the problem persists. What is happening here? Is it looking for tsconfig.json in the root of my workspace? Or does it walk up the directory tree from each file, looking for tsconfig.json?

[Serhansolo]

@DavidXenakis Nice find! I can confirm what he said in his EDIT ... Fix please!

[eyedean]

I just found it doesn't pick up the tsconfig.json changes immediately. You need a simple VSCode restart (command+shift+p and then Reload Window).

That fixed it for me. :)

[sss721]

Any fix for this bug?

[bugproof]

[bhillis]

I can confirm that changing the order of folders in the workspace fixes the issue. It appears that if the Vue app is not the first folder in the workspace then the error occurs.

[robsonsobral]

Try t o create a file named jsconfig.json (not a tsconfig.json) on project root:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": ["node_modules"]
}

[cyberbit]

Can also confirm, changing the order of folders in my workspace solved the problem. Thanks, @bhillis!

[sss721]

@bhillis Reordering works!! But it is a weird fix.

[definitelyokay]

Hey all, I seem to be experiencing the same thing on macOS 10.14.6 with VSCode 1.38.0 and Vetur 0.22.2.

I have a single jsconfig.json in my root project directory for my javscript project. No other workspaces or folders open.

Basically, if I want to leave Vetur's vetur.validation.script set to true I get the following with a webpack lazy import/load in my Vue SFC (single-file-component):

I like to leave Vetur validation on because I can benefit from JSDoc typings to improve my JavaScript experience.

Nothing on this thread has worked for me.

[robsonsobral]

If you are using TypeScript, you need to use the tsconfig.json file.

[definitelyokay]

If you are using TypeScript, you need to use the tsconfig.json file.

I'm not using TypeScript. I have the Typescript validation turned on to take advantage of JSDoc hints.

[robsonsobral]

Me too, @josephessin , but it's working for me.

[definitelyokay]

@robsonsobral I wish I could say the same. The code base I'm working in is rather large but I might try to to reproduce in a smaller repo

[hiniko]

I don't know if this fits in with the issue mentioned here (especially with the open folder find) but under the FAQ for setting up [js|ts]config.json and webpack it does say that you need the .vue extension if you're importing a SFC. Added this to a couple of import statements and the errors go away for me.

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cannot-recognize-my-vue-component-import-such-as-import-comp-from-comp

I hope that is something that get changed / fixed as that is painful to go and fix everywhere.

[philanderson888]

I can confirm that changing the order of folders in the workspace fixes the issue. It appears that if the Vue app is not the first folder in the workspace then the error occurs.

As mentioned above I trivially found the fix to physically drag my folder to the top of the folder tree so it doesn't look for another ts.config above it. That fixed it for me but that is a slightly worrying fix because it means whatever is causing the underlying issue has not been fixed.

[WhiteExponent]

I am using Emacs 26.1, lsp, and vue-language-server 0.0.61. Getting the same error. I am writing a Nuxt app so the following was already inside tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["types/*"],
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    }
  }
}

I get the following error.

EDIT: Could this error possibly have to do with the fact that my tsconfig.json is not at project root, but rather inside a client directory? Or does it not matter?

[abdusamadtv]

Any fixes?

[litt1e-p]

just reopen vs code and it get fixed

[robsonsobral]

EDIT: Could this error possibly have to do with the fact that my tsconfig.json is not at project root, but rather inside a client directory? Or does it not matter?

For me, yes! I had to keep the jsconfig.json at project root.

[rdhelms]

Still having this problem with Vetur 0.22.6, VSCode 1.39.2.

Physically re-ordering the folders in the workspace can help unless multiple folders are Vue projects, in which case the last one shows the errors.

Opening each folder in its own workspace works and no errors are shown. Basically with the current state of things I just have given up on using a VSCode workspace with multiple folders.

Might be related: #815

[robsonsobral]

Sharing a little light:

https://vuejs.github.io/vetur/setup.html#project-setup

https://lmichelin.fr/vscode-intellisense-jsconfig-vue-js-nuxt-js-absolute-imports/

[MickWang]

Upgrade and restart vscode works.

[jvik]

Can confirm what others have been mentioning. If I open the vue-client folder inside my monorepo imports are working fine. If I open the whole monorepo, Vetur is complaining about the imports.

tsconfig.json

{
	"files": ["src/typings/shims-vue.d.ts"],
	"compilerOptions": {
		"sourceMap": true,
		"target": "es5",
		"experimentalDecorators": true,
		"module": "esNext",
		"jsx": "preserve",
		"allowSyntheticDefaultImports": true,
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"importHelpers": true,
		"allowJs": true,
		"baseUrl": ".",
		"paths": {
			"~/*": ["./*"],
			"src/*": ["src/*"]
		},
		"esModuleInterop": true,
		"lib": ["es2015", "esnext", "dom", "dom.iterable", "scripthost"]
	},
	"include": ["src/**/*.ts", "src/**/*.vue", "test/**/*.ts", "./typings"],
	"exclude": ["node_modules/**", ".quasar", "dist"]
}

edit:

It seems like multi-root and sub-folder support is on the roadmap for v 1.0
#873

As @rdhelms suggests, this is probably related to #815

[JasonFoglia]

Timeline for fix??

Head melting away!

[jimhucksly]

I have same problem

"compilerOptions": {
    "allowJs": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "*"
      ]
    }
}

in .ts file it's all right with alias "@"

The problem in .vue file!

[heiyehk]

The folder client contains a vue project created by vue-cli
The folder empty contains only a empty tsconfig.json

works fine:

Cannot find module '@/components/HelloWorld.vue':

The only difference is order

gif:

Very effective, solved my problem

[jimhucksly]

The Question is not by theme ... sorry
How to enable this notifications in VS Code?

[gammx]

Waiting for the fix here...

[thalesagapito]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

[136shine]

I solved this problem
in .eslintrc.js
add '@typescript-eslint/no-var-requires': 0 in the options of rules

[kaangokdemir]

I'm having same issue. Non of any solution solved my problem except using relative paths.

[tobx]

The following worked for me:

My TypeScript client is in the projects subdirectory web. In this subdirectory I have my tsconfig.json. I left the tsconfig.json untouched, but added a new jsconfig.json to the projects root as @robsonsobral suggested. Then I added "baseUrl": "./web", so my jsconfig.json looks like this:

{
  "compilerOptions": {
    "baseUrl": "./web",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

You might have to reload the window or restart VSCode.

I do not have a multiroot workspace, but this might work too, if you specify baseUrl correctly. If you have multiple js/ts roots, I guess this will not work.

[jstiers]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

[LucianoFromTrelew]

I could fix this issue by just appending .vue to file path I was importing from (doc)

So, instead of

import MyComponent from "@/components/MyComponent"

write

import MyComponent from "@/components/MyComponent.vue"

I hope it helps somebody else 🙏

[ikkyu-3]

I solved this problem.
The reason was that <script lang="ts"></script> was missing in the Vue file to be imported.

// components/HelloWorld.vue
<template>
...
</template>

<script lang="ts"></script> // added

// index.vue
<template>
...
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"; // OK
....
</script>

[falcon-lin-development]

it

Well it works for me. After I deleted the import statement and rewrite it. I believe this is the problem of vetur and vscode. Let hope this bug will be fixed in the next update.

[e2goon]

waiting fix here......... 😢

[chrisbchrist]

Using VSCode/Vetur, I receive this error when importing from TypeScript files through an alias, however Vue components seem to work just fine.

In webpack config:

alias : {
  '@store': path.resolve(__dirname, './ClientApp/store')
} 

In tsconfig:

"paths": {
  "@store/*": ["ClientApp/store"]
}

Nothing seems to help. I have an alias for importing components set up identically which has no issues.

[SheldonLaw]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

This really help me!

I open a big folder contains my vue project and get this error.

When I try to open my vue project in VSCode everything work fine!

[bo5o]

I am using vim with vim-lsp and vim-lsp-settings. I was able to solve the problem by making sure the language server is started from the sub-directory where tsconfig.json lives and not the .git/ root, which was the default. Then everything worked fine. For further details see mattn/vim-lsp-settings#212

[jinger7281]

如果你是中文环境，请不要把工程文件夹放在有【中文】或者【带空格】的目录文件夹中，在中文环境下刚开始是正常的，过段时间就会出错。出错原因不明。
DO NOT PUT your project directory into none ascii drictory, or the directory name has a space charactor,if you put your directory into that environment, at beginning, it may be ok, but after some time, it will appear that error indicator.
标签：无法正常识别@，无法正常识别注入的$router,$message等变量
Label: Can't recognize @, can't recgnize $router or $message DI variable

[PatricNox]

[billytunin]

For now, the quickest fix for this error is to rearrange your folder structure in VS Code.

To fix:

Manually drag your Vue App's Folder to the top of your opened projects inside of your VS Code workspace.

As mentioned by @cyberbit and @philanderson888

This fixed it for me. Thank you! :)
I had two different projects on the same workspace. I just moved the project, which was having this problem, to the top and that made it work ¯_(ツ)_/¯

[NoHara42]

Hi all,
having the same issue. Quick fix mentioned by @cyberbit and @philanderson888 was not successful.
I have removed all other repos from my VSCode but still have the issue.
Before stumbling upon this thread I created a StackOverflow post describing my issue.
Feel free to take a look:
https://stackoverflow.com/questions/61426543/cannot-find-module-assets-file-name-here-svg-vue-cli-version-4-2-3-and

Many thanks.
Looking forward to a fix!

[srchulo]

I am seeing this as long as I have lang="ts" on my script tag in my component:

<script lang="ts">
import NavBar from '~/components/NavBar'

export default {
}
</script>

[codemonkey800]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

I've figured out a workaround for this. My company has a monorepo with the client being located a few directories down. You can use multi-root workspaces to get it working, the only requirement is that the Vue project is the first entry in the folders array:

{
  "folders": [
    {
      "name": "Vetur Project",
      "path": "./packages/web"
    },
    {
      "name": "Monorepo",
      "path": "."
    },
  ]
}

I'm not sure how it works internally, but I'm guessing VSCode treats the first project as the root project or something? Vetur sees this and then all of the path mappings and stuff work fine on my end. And because of the workspace, I have access to the rest of the monorepo

I assume this will only work for one Vue project though. If you have multiple Vue packages, then this won't work. You'll either need to create a workspace for each Vue package, or suffer 😢

[ctsstc]

@LucianoFromTrelew adding .vue to the import doesn't resolve the import properly for hinting. It just resolves it to vue typing file which is equally as useless unfortunately (at least this is what happens in my case).

[ctsstc]

@codemonkey800 Thanks that worked for now :) I have actually been using workspaces, but putting it as the first item seems to have fixed it 🎉 I had to modify my workspace file directly as there seems to be no other way to re-order the workspace directories, and then I had to restart VSCode to get it completely working 🎉 This will be a nice work-around while working on an app in a monorepo.

[7kemZmani]

In my case, removing lang="ts" has (weirdly) fixed the problem!

[PatricNox]

@7kemZmani Removing lang="ts"removed the linted errors for me as well, neat!

But I'm afraid that removing the lang attribute may potentionally be causing other problems. Wouldn't it?

Edit: Through simply googling just

lang="ts"

you can quickly stumble upon threads that is about the very same issue that we discuss here.

[codemonkey800]

@7kemZmani It isn't a a fix because the original problem is that TypeScript path mapping isn't working. Removing lang="ts" will treat code in the <script> block as JavaScript

[cuzox]

@codemonkey800 I have a multi-root workspace and I've found myself switching the order of the folders as I'm working on them 🤦‍♂️

[panayotoff]

I have the same problem, but with node_modules package. The package is installed, the code is working, but vetur throws error Cannot find module 'vue-flickity'.Vetur(2307)

[myialine]

I solved this problem.
The reason was that <script lang="ts"></script> was missing in the Vue file to be imported.

// components/HelloWorld.vue
<template>
...
</template>

<script lang="ts"></script> // added

// index.vue
<template>
...
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"; // OK
....
</script>

I had the same issue while using lang=ts. What fixed it for me was adding .vue to the end of the file as @LucianoFromTrelew suggested .

[fengxiaooctober]

This problem is very annoying, would be perfect once it'll supoort monorepo

[wizardnet972]

I also get Cannot find module '@/use/use-boards'. Vetur(2307) error.
Possible solution: read the tsconfig.json that closest to the file (not in the root).

boards.vue:

tsconfig:

"paths": {
      "@/*": ["src/*"]
 }

the folder:

[heavenkiller2018]

I have the same problem when use monerepo. recommend to fix it quickly as monerepo is very popular!

[yoyo930021]

Please follow #424, #815

[andy3520]

So, what I've gathered from all this:

If you're in a monorepo/multi-root setup

At the present time Vetur does not support such use cases. The best you can do is vote for this feature (Multi-root and Sub-folder support) at #873, help implement it or wait for it. And try to follow the team's recommendations, like opening the subfolder directly instead of the project. Vetur will only work if your Vue project is at the top-level.

If you're not in a multi-root setup (your Vue project is at the top-level)

1. Try restarting the window.
2. Double check your root jsconfig.json/tsconfig.json. Make sure you're following the docs on project setup and path mappping.
3. As a last resort, you can use relative paths, e.g. "../../components/my-component.vue"

I've figured out a workaround for this. My company has a monorepo with the client being located a few directories down. You can use multi-root workspaces to get it working, the only requirement is that the Vue project is the first entry in the folders array:

{
  "folders": [
    {
      "name": "Vetur Project",
      "path": "./packages/web"
    },
    {
      "name": "Monorepo",
      "path": "."
    },
  ]
}

I'm not sure how it works internally, but I'm guessing VSCode treats the first project as the root project or something? Vetur sees this and then all of the path mappings and stuff work fine on my end. And because of the workspace, I have access to the rest of the monorepo

I assume this will only work for one Vue project though. If you have multiple Vue packages, then this won't work. You'll either need to create a workspace for each Vue package, or suffer 😢

Thank you, this is working for me w/ latest vetur + vscode

[uuf6429]

@andy3520's solution also worked for me.

To the Vetur devs: it seems that this whole thing is based on some configuration assumptions (single root project...) - if getting the whole feature to work in all situations is difficult, maybe at least show some further details in the error message (something like "Cannot find module xxxxxx, searched in yyyy, zzzz."
It's incredibly useful to devs to know what magic is going on under the hood....

[Deji69]

Getting the same problem... removing lang="ts" fixes the Vetur error but of course disables TypeScript so is not an option... I don't have a multi-root workspace, just a normal folder-based project. No fix I've found has worked yet.

Never mind... be sure to reload the window between every attempt to fix, apparently that was all I needed.

[robbyemmert]

What would it take to fix this? Do you need help? Please let us know what is needed to fix this issue. This is a real show stopper.

[yoyo930021]

What would it take to fix this? Do you need help? Please let us know what is needed to fix this issue. This is a real show stopper.

I don't think it's a mistake.
In fact most of the time it doesn't work simply because the user isn't set up and it's not user-friendly enough.

Here are the steps to make it all work

1. Add (tsconfig.json or jsconfig.json) and package.json in project root
2. Add paths in tsconfig.json or jsconfig.json. more
3. Restart vscode and open project root folder.
   PS. Vetur can't watch config file now and project root must to have (tsconfig.json or jsconfig.json) and package.json.
4. Check if everything is working

If you follow these steps and it still doesn't work, please open a new issue.
It would be nice to have a reproducible project and steps for us.

I've been planning for the future to make Vetur more user-friendly.
But not until after the monorepo or together.

[ManfredHu]

In my case, removing lang="ts" has (weirdly) fixed the problem!

it’s can work for me

[major697]

Any ideas ?

[yoyo930021]

Any ideas ?

#762 (comment)

[PatricNox]

#762 is the solution as for now, however not the real solution as this doesn't solve the issue with these types of workspaces:

Workspace 1
-- Repository 1 - Vue
---- <Here we have this issue>
-- Repository 2 - Laravel

The solution as aforementioned is to open repository #1 in its own workspace, there having the package json at the root of the workspace. But not the real solution.

The style of two repos in same workspace is very typical for decoupled solutions and API integrations between two projects.

[yoyo930021]

#762 is the solution as for now, however not the real solution as this doesn't solve the issue with these types of workspaces:

Workspace 1
-- Repository 1 - Vue
---- <Here we have this issue>
-- Repository 2 - Laravel

The solution as aforementioned is to open repository #1 in its own workspace, there having the package json at the root of the workspace. But not the real solution.

The style of two repos in same workspace is very typical for decoupled solutions and API integrations between two projects.

This project does not support workspace at this time.
It's deviating from the issue.
Please follow #2377

[major697]

Any ideas ?

#762 (comment)

This solution not working, I have tsconfig.json with:

...
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
...

and still I have an error:
Cannot find module '@/components/table/TableComponent.vue' or its corresponding type declarations.Vetur(2307)

[yoyo930021]

Any ideas ?

#762 (comment)

This solution not working, I have tsconfig.json with:

...
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
...

and still I have an error:
Cannot find module '@/components/table/TableComponent.vue' or its corresponding type declarations.Vetur(2307)

if you set baseUrl?
You can provide a reproducible project.

[major697]

@yoyo930021

if you set baseUrl?
You can provide a reproducible project.

I have baseUrl. My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/shims-vue.d.ts"
  ]
}

[yoyo930021]

@yoyo930021

if you set baseUrl?
You can provide a reproducible project.

I have baseUrl. My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/shims-vue.d.ts"
  ]
}

Please provide a reproducible project.
https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md
Otherwise we don’t have enough information to help you.

[yes1am]

In my cases, add file extension solve the problem

bad:

import Hello from '@/component/Hello'

good:

import Hello from '@/component/Hello.vue'

see: https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cannot-recognize-my-vue-component-import-such-as-import-comp-from-comp