@ 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!
Please sign in to leave a comment.
You can try specifying
node_modules/@vue/cli-service/webpack.config.js
as a configSee 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/...
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:
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.
<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 shareableI´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