@ alias in vue-cli 3 projects

Hi!

I've created a new Vue app using @vue/cli 3.0.0-beta.10 and @ alias is not resolved:

And this project haven't got any webpack.config.js file in order to specify in webstorm settings.

How can I resolve this alias?

Thanks!

18 comments

This is not working anymore in Intellij .. Any idea how to fix this one ?

0

Yeah sure, here you go :

https://github.com/Octirke/vue-webpack-config-error

While trying to reproduce I discovered that conf resolving is working when my vue project is the root directory. As soon as I move the vue app to a subdirectory (client), conf resolving is not working anymore.

0

Known issue, https://youtrack.jetbrains.com/issue/WEB-32564: alias is resolved relative to project root dir, not to module root dir where the package.json resides

0

Any fix while waiting for a new release apart from loading only the client directory in IntelliJ ? Will it be fixed in 2018.2 ?

 

Thanks.

0

I can't suggest any workarounds, sorry. Please follow the youtrack ticket for updates (https://intellij-support.jetbrains.com/hc/en-us/articles/207241135-How-to-follow-YouTrack-issues-and-receive-notifications) to be notified when it's fixed

0

The link provided is broken as there is a ':' at the end of the url

https://youtrack.jetbrains.com/issue/WEB-32564

0

It appears there are several threads on this topic including a jetbrains YouTrack internal ticket for this issue. According to the team member the issue was resolved in IU-182.4505.22 (IntelliJ 2018.2.4). At the time I was running 2018.1 so i decided to upgrade. Having dropped 60 bucks and now on 2019.1 I'm still getting the same error. 

(https://youtrack.jetbrains.com/issue/WEB-32564)

App.Vue Imports

Router for Imports && LazyLoading 

Using community suggested hotfix, still no dice.

0

Your problem must be different, https://youtrack.jetbrains.com/issue/WEB-32564 was fixed long time ago, it's no more an issue.

What language do you use for wrting your compinents - Javascript or Typescript? Can you share a sample project that can be used to recreate the issue?

0

I got the following error when trying to import my webpack.config.js from node_modules/@vue/...

2019-05-19 12:02:15,938 [55262191] WARN - dTools.webpack.WebPackExecutor - failed to evaluate webpack config. exit code: 1
stdout:
stderr: C:\Users\XXX\WebStormProjects\XXX\node_modules\@vue\cli-service\lib\Service.js:199
async run (name, args = {}, rawArgv = []) {
^^^

SyntaxError: Unexpected identifier
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\XXX\WebStormProjects\XXX\node_modules\@vue\cli-service\webpack.config.js:7:19)

I am using WebStorm 2019.1.2 (build #WS-191.6707.60) on Windows 10 using WSL with node v10.15.3.

 

PS: It looks like async keyword is not recognised, maybe this is due to WebStorm's JavaScript interpreter version?

0

>It looks like async keyword is not recognised

yes, exactly

>maybe this is due to WebStorm's JavaScript interpreter version?

WebStorm doesn't have any own interpreters, it uses Node.js installed on you machine to run javascript. Async functions are not supported by Node versions older than version 7.6. Make sure to upgrade Node.js to 8+

0

>Make sure to upgrade Node.js to 8+

As I said earlier, I am running Node v10.15.3. FYI, Node is not installed in Windows, only in WSL.

Edit: Due to the presence of Windows paths in the error message, WSL's Node is probably not used. I have no idea for now where this interpreter is located. This may explain why this occurs only to some people.

0

WebStorm normally uses Node interpreter set up in Settings | Languages & Frameworks | Node.js and NPM, Node Interpreter when evaluating webpack. What Node.js version do you have configured there?

0

The config path must be an absolute path.

0

Having the same issue and I am using the full path to the weback config.

0

@Tbecks your issue is different - you are working with Typescript. With Typescript, webpack aliases are not respected, path mappings from tsconfig.json are used instead (as we need to follow the compiler logic here, and tsc knows nothing about webpack)... and this doesn't unfortunately work in 2019.1.x - see https://youtrack.jetbrains.com/issue/WEB-38843

0

Please sign in to leave a comment.