@ 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!

22 comments
Comment actions Permalink

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

8
Comment actions Permalink

Great!

It works!!

Thanks!

1
Comment actions Permalink

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

0
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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

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

0
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

>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
Comment actions Permalink

>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
Comment actions Permalink

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
Comment actions Permalink

The config path must be an absolute path.

1
Comment actions Permalink

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

0
Comment actions Permalink

@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
Comment actions Permalink

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.

1
Comment actions Permalink

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.

0
Comment actions Permalink

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.

 

0
Comment actions Permalink
 
no way, it should be an absolute path; but note that it's stored as a relative path actually (as <option name="path" value="$PROJECT_DIR$/node_modules/@vue/cli-service/webpack.config.js" /> - check your project .idea/misc.xml) so the project is still shareable
0

Please sign in to leave a comment.