[WebStorm][Nuxt/Vue][Webpack] Webstorm does not see @ alias after IDE update

Avatar
Permanently deleted user
Created

I have Nuxt/Vue project. Aliases are wrote in nuxt.config.js and webpack.config.js (to let Webstorm see these aliases). After last update to 2020.3 it doesn't work. How to fix it?

webpack.config.js looks like:

const path = require('path');

module.exports = {
  resolve: {
    // for WebStorm
    alias: {
      '@': path.resolve(__dirname),
      '~': path.resolve(__dirname),
      Osago: path.join(__dirname, '/components/Osago'),
      NS: path.join(__dirname, '/components/NS'),
      Ifl: path.join(__dirname, '/components/Ifl'),
      Covid: path.join(__dirname, '/components/Covid'),
      UI: path.join(__dirname, '/components/UI'),
      Product: path.join(__dirname, '/components/Product'),
      Article: path.join(__dirname, '/components/Article'),
      '^^': path.resolve(__dirname),
    },
  },
};

Votes

1

Share

13 comments
Avatar
Elena Pogorelova
Created

Please try changing webpack.execution.timeout.ms value in registry (Help > Find action, type registry... to locate it) to some bigger value - does it make things any better?

0
Avatar
Permanently deleted user
Created

I put 1000000. It gave no result. I also restarted IDE after

0
Avatar
Elena Pogorelova
Created

similar issue is tracked at https://youtrack.jetbrains.com/issue/WEB-48547, please follow it for updates

So far we haven't found a way to reproduce it:(

What Node.js version do you use?

0
Avatar
Elena Pogorelova
Created

could you check if a workaround from https://youtrack.jetbrains.com/issue/WEB-48607#focus=Comments-27-4581210.0-0 helps?

0
Avatar
Permanently deleted user
Created

Elena, the last link doesn't work. Please check it.

I use Node v. 12.9.1

0
Avatar
Elena Pogorelova
Created

Sorry, the ticket author made it visible to a limited group only

Could you try deleting the node_modules directory and then again install all the packages? If it won't help, after that please perform File > Invalidate caches/Restart, Invalidate and restart.

0
Avatar
Permanently deleted user
Created

I deleted node_modules directory. It helped. Thank you

0
Avatar
Cesarmartinezd
Created

Having the same problem after updating to Webstorm 2022.3.1

Normally I have no webpack.config.js since I'm in a Nuxt project and it creates those aliases for me automatically. 
I added one anyways to see if it would help, but to no avail. 

I have tried: 

- deleting the node_modules 
- performing File > Invalidate caches/Restart, Invalidate and restart.
- setting up a new value for a timeout webpack.execution.timeout.ms in the registry, set about 60000 or more.

Note: it only fails in .vue files. Works fine in all other files 

0
Avatar
Elena Pogorelova
Created

what does the configuration file you added look like? please share it along with screenshots of webpack and Node.js preferences pages

0
Avatar
Cesarmartinezd
Created

The config was just: 
webpack.config.js

const path = require('path');

module.exports = {
  resolve: {
    // for WebStorm
    alias: {
      '@': path.resolve(__dirname),
    },
  },
};

I removed it after noticing that the issue is only on .vue files. Added screenshot and updated previous comment after this finding.

Node version: 16.14.2 

0
Avatar
Cesarmartinezd
Created

Fixed it by adding "**/*.vue", to my tsconfig include list, as follows: 

tsconfig.json

{
  ...
  "include": ["**/*.ts", "**/*.vue", "vue-shim.d.ts", ...],
  ...
}

Thanks

0
Avatar
Cesarmartinezd
Created

Actually, doing this include in my tsconfig.json

{
  ...
  "include": ["**/*.ts", "**/*.vue", ...],
  ...
}

brought a whole other host of issues... So I'll have to remove it and find a different way to fix the issue

1
Avatar
Elena Pogorelova
Created

>Fixed it by adding "**/*.vue", to my tsconfig include list

for Typescript files/.vue files with lang="ts", path aliases indeed have to be defined in tsconfig.json, webpack aliases are not respected

0

Please sign in to leave a comment.