@ alias in vue-cli 3 projects Follow

You can try specifying node_modules/@vue/cli-service/webpack.config.js as a config

See https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/360000146344

Great!

It works!!

Thanks!

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

please provide a test project + your idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files)

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.

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

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.

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

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

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

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.

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?

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?

>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+

>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.

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?

The config path must be an absolute path.

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

@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

I have similar issue (no typescript). When I pointed to the `./node_modules/@vue/cli_service/webpack.config.js` I received such error:

> Can't analyse webpack.config.js: coding assistance will ignore module resolution rules in this file.
> Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
> Error details: Cannot read property 'require' of undefined

Node interpreter: 10.13

So I decided to create a workaround:

1. Create file `webpack.fake-config.js` in projects root
   

   const path = require('path');
   
   module.exports = {
     resolve: {
       alias: {
         '@': path.join(__dirname, 'src'),
       }
     },
   };

2. Point it in WebStorm configuration
3. Add the file to .gitignore (optional)

All work fine now.

Go to "Your_project/node_modules/@vue/cli-service/webpack.config.js"

There add code that was given by Piotr Adamowicz . Then it will work.

Also, don't forget to add the path into webpack config file.

Is there a way to set a relative path to the webpack config? 

/node_modules/@vue/cli-service/webpack.config.js

It seems it only understands absolute path and the above doesn't work.

I'm on Mac in case that matter.

I´m using yarn workspaces and it seems if you have multiple modules, the IDE won´t recognize those paths anymore. I have to say it makes development and refactoring often very painful and I hope there will be a solution for it. 

Can´t Intellij look for src directories relative to indexed package.json files?

The problem has arisen again. There is no tips for alias path.

last version, it worked.

now,it is not work.no tips. even i select webpack.config.js manually in order to set alias tips for webstorm

Webpack aliases are a great way to simplify imports in your Vue JS projects. Instead of specifying long paths, we can instead use a short alias and webpack will generate the full path when we build/run our project.

UPSers

2021.3 version, still not working