Path alias is not recognised in .vue files

Hi,

I'm running the Vue.js project with typescript and having issues with imports in the .vue files. 

As you can see in the screenshot (Upload id: 2020_10_05_61aRoUrLVauJf9Pg (file: Screenshot 2020-10-05 at 15.38.07.png)) path alias are not recognized by IDE (though project compiles without errors). "appTypes" is a .ts file. Alias is configured in the webpack.config and in the tsconfig files.

Can you please assist me with this issue? Thanks in advance. 

6 comments
Comment actions Permalink

path mappings in tsconfig.json are correctly resolved for me

Are you importing a .ts or .vue file? In the latter case, did you try adding '.vue' extension to the import? Also, what IDE build do you use?

0
Comment actions Permalink

I'm importing from the .ts file. Imports from .vue and libraries are resolved without any errors.

0
Comment actions Permalink

Works fine for me.

what IDE build do you use? Could you share a sample project the issue can be repeated with?

0
Comment actions Permalink

Here is a link to a sample app with the same configuration: https://github.com/tokarskadiana/test-vue .

Not recognized import is the file under src/views/TestComponent.vue

import { TestType } from "@/appTypes";

 

I'm using WebStorm 2020.2.2, Build #WS-202.7319.49, built on September 14, 2020

0
Comment actions Permalink

Works fine for me in 2020.2.2 when using your project:

 

No errors are reported, Ctrl+click jumps to TestType declaration in src/appTypes.ts

Do you have Typescript language service enabled in Settings | Languages & Frameworks | TypeScript, BTW? Though it works fine without the language service, it usually provides better coding assistance when editing Typescript

0
Comment actions Permalink

Thanks for the tip to look into the settings. The language service was on, but restoring default WebStorm settings resolved the issue.

1

Please sign in to leave a comment.