Webstorm does not see @ alias

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.

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

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. 

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

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. 

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

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.

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

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

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.

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.

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"
]

‼️

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

AND IT WORKS, RESOLVED IMMEDIATELY 

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

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

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

@Julianandreszb this worked for me, Thank you.

For me it was just I didn't run configure Nodejs and npm for Webpack:

This is still an ongoing issue with WebStorm 2023.2.3

Our project consists of two parts: `packages` and `app` which have different configs.

I can't access to `@extension` path

Our typescript and vite configs are fine. Other devs use VS Code without issues. 

This is an issue with Webstorm and it's not being resolved for a long time :( 

Do you have a sample project you can share that reproduces the issue?