Webstorm does not see @ alias

I made all recommended method. 

1. I set my path to webpack config settings -> Webpack

2. I mark directory as Root.

3. I excluded other folders, includes node_modules.

However, webstorm doesn't see my alias. Help me, please. Linux mint 19

46 comments
Comment actions Permalink

Sorry if it's a bit off-topic.

I have a monorepo project with several subsystems in different technologies, including Go and Vue.js. Goland is used to develop them. IDEA project includes this entire monorepo (it's small, a pet project of mine, but since it includes several loosely connected subsystems, I'm calling it like that).

Webpack path aliases (`@/module/name`) used to work up until Goland 2020.3, but in 2021.1 they stopped working. Same with 2021.x EAP / 2021.2 Beta. So I had to stick to 2020.3 for the time being. Caches were purged, and IDEs reinstalled, .idea folders dropped, and .Goland folders too -- with no effect.

I followed advice by Ambroise Dhenain and crafted a small jsconfig.json in the root of the Vue.js project (not the root of IDEA project):

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}

 Goland picked up Webpack path aliases immediately in 2021.2 Beta. 2021.1 appears to work too.

1
Comment actions Permalink

The same problem as everyone else. You don't seem to be going to solve it, do you? Elena Pogorelova 

my webpack.config.babel.js file

config.resolve = {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
components: path.resolve(__dirname, './src/components'),
store: path.resolve(__dirname, './src/store'),
assets: path.resolve(__dirname, './src/assets'),
helpers: path.resolve(__dirname, './src/helpers'),
constants: path.resolve(__dirname, './src/constants'),
},
};

my imports

When trying to set the config manually

Why it doesn't work

0
Comment actions Permalink

In my case (for Phpstorm) was enough to set a manual path to webpack config. 

I go to "File | Settings | Languages & Frameworks | JavaScript | Webpack" and then choose "Manually" and give the path to the webpack config and now it's works superb. 

2
Comment actions Permalink

Did similar: Webpack > Manual then back to Automatic. Webstorm picked it up. It's working well now.

1
Comment actions Permalink

it is not working for me, i have tried now many times. It is really super annoying, because being able to jump through code is one of the few reasons for me to use an IDE at all. 

0
Comment actions Permalink

frido Please create a support ticket , providing your idea.log (Help > Show Log in ...) and a problem description (what files your have issues with, what do your imports look like, etc.). The behavior can be different depending on a language/framework being used, etc

0
Comment actions Permalink

I did make a support ticket.

However, in the meantime I managed to 'fix' it, by adding the package "eslint-import-resolver-alias" to package.json and configuring eslint to observe the same alias as webpack. I find this very erratic behaviour of webstorm, it really shouldn't work like this.

0
Comment actions Permalink

the IDE doesn't check ESLint settings when evaluating webpack. But, if your webpack config imports certain packages (directly or indirectly) that can't be resolved, this would result in problems evaluating the configuration, and the aliases won't be recognized

0
Comment actions Permalink

For those who also facing this problem.

My situation is that not "Run webpack configuration"

https://www.jetbrains.com/help/webstorm/using-webpack.html#project_security

So either click "Run webpack configuration", or add projects folder to the "Trusted locations"

https://www.jetbrains.com/help/webstorm/using-webpack.html#trusted_projects

1
Comment actions Permalink

I had the same issue. But I fixed it by enabling it in the WS settings.

After enabling, IDE will prompt to trust project and run, just accept it.

0
Comment actions Permalink

The following change fixed it for me (PyCharm):

I received the following error in the event log:

Webpack
            Can't analyze webpack.common.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.

Refactored the webpack file a bit: 

Maybe the fact that I was inlined an external module into the configuration body caused the IDE to not recognize the file as a webpack config file.

0
Comment actions Permalink

The trick that worked for me was to add the include block to the tsconfig.json. I don't use webpack at all but a monorepo. This is why my src path is has the packages and "app" name in front.

"compilerOptions": {
"paths": {
"@/*": ["packages/XXXX/src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
]
0
Comment actions Permalink

‼️

I have added node.js interpreter and checked coding assistant for Node.js. The project is Vue 3, webpack

AND IT WORKS, RESOLVED IMMEDIATELY 

 

2
Comment actions Permalink

Create a jsconfig.json in the root directory. Then paste the below content:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

WebStorm will recognize the imports.

Source:  Stackoverflow-WebStorm

 
1
Comment actions Permalink

Julianandreszb For the first time in years a working solution, thanks for that! 

0
Comment actions Permalink

Ssahakyan,

huh, thanks to you insight! After that I checked my IDEA NodeJs interpreter and it  has broken path. After I fixed it, aliases that starts with "@" now works well. With broken NodeJs interpreter path aliases have worked but only that not started with "@".

 

1

Please sign in to leave a comment.