Path aliases for imports in WebStorm

Question

I use webpack path aliases for ES6 module loading.

E.g. If I define an alias for utils instead of something like
import Foo from "../../../utils/foo", I can do
import Foo from "utils/foo"

The problem is that once I start using aliases, WebStorm looses track of the import and I'm left with warnings and no auto-completion.

Is there a way to instruct WebStorm to use such aliases?

Answer 1

Yes, there is.

In fact, Webstorm can't automatically parse and apply Webpack config, but you can set up aliases the same way.

You just have to mark the parent folder of "utils" (in your example) as a resource root (right-click, mark directory as / resource root).

We just managed to do with the following structure :

/src
    /A
    /B
    /C

We have A B and C folders declared as alias in Webpack. And in Webstorm we marked "src" as "Resource Root".

And now we can simply import :

import A/path/to/any/file.js

instead of

import ../../../../../A/path/to/any/file.js

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on ...

Answer 2

I managed to set up aliases for WebStorm 2017.2 within webpack like this:

Answer 3

You can define custom paths, so WebStorm/PhpStorm can understand your aliases. But make sure, they are identical with your aliases. Create file in your root directory and call it something like this: webStorm.config.js (any js file will be ok). Then configure your paths inside:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm/PhpStorm will recognize System as it's own module and will treat this file as configuration.

Answer 4

For the record: in PHPSTORM, working with laravel mix, I managed to solve this by creating a webpack.config.js file separately like:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

And then importing it in the webpack.mix.js like:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

Answer 5

This is answered in a comment but to save people digging into comments and link only information, here it is:

As of WS2017.2 this will be done automatically. The information is here.

According to this, webstorm will automatically resolve aliases that are included within the webpack.config in the root of the project. If you have a custom structure and your webpack.config isn't in the root folder then go to Settings | Languages & Frameworks | JavaScript | Webpack and set the option to the config you require.

Note: Most setups have a base config which then call a dev or prod version. In order for this to work properly, you need to tell webstorm to use the dev one.

Answer 6

Not right now, We were also using path aliases for the files in our react project. The import names were shorter but we lost a lot on static checking of webstorm as well as completion features.

We later came up with a decision to reduce the code to only 3 levels of depth, as well a single level for the common parts. The path completion feature of webstom (ctrl + space) even helps reduce the typing overhead. The production build does not use longer names, so hardly makes any difference in final code.

I will suggest please reconsider your decision about aliases. You loose semantic meaning of modules coming from node_modules and your own code, as well as referencing the alias files again and again to make sense of your code, is a much bigger overhead.

Answer 7

add jsconfig.js on your project root

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

Answer 8

In PHPStorm (using 2017.2 currently), I have not been able to get webpack configs to work properly in regards to aliases.

My fix involves using the "Directories" section of the main settings. I just had to mark each folder referenced by an alias as a sources root, then click the properties dropdown for each and specify the alias as a "Package prefix". This made everything link up for me.

Not sure if the Directories section exists in WebStorm, but if it does, this seems to be a fool-proof method for getting import aliases working.

Answer 9

For anyone struggling: path.resolve() must be called with "__dirname" first argument for Idea (Websorm) to be able to resolve the path correctly.

Will work for Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

Will not work for Idea (Websorm) (while still being valid webpack alias):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}

Answer 10

Webstorm can't read webpack.config if module.exports return a function. For example

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

Check your config file, maybe this cause you are a problem.

Answer 11

There is a lot of discussion here about Laravel Mix, so I'll leave this here to help out future readers. I solved this by creating a separate (fake) webpack config file which is only used by my IDE (PHPStorm).

1. Create a separate alias.js file (e.g. /webpack/alias.js)

const path = require('path');

const assets = path.join(__dirname,'..','resources','assets');

module.exports = {
    '@js'        : path.resolve(assets, 'js'),
    '@c'         : path.resolve(assets, 'js', 'components'),    
    '@errors'    : path.resolve(assets, 'js', 'errors'),
    '@utils'     : path.resolve(assets, 'js', 'utils'),
    '@store'     : path.resolve(assets, 'js', 'store'),
    '@api'       : path.resolve(assets, 'js', 'api'),
    '@less'      : path.resolve(assets, 'less')
}

2. Require the alias.js file into webpack.mix.js

const mix  = require('laravel-mix');

mix.alias(require('./webpack/alias'))
   // ... The rest of your mix, e.g.
   .js('app.js')
   .vue()
   .less('app.less');

3. Create the fake webpack config for your IDE (e.g. /webpack/ide.config.js)

Here, import the laravel-mix webpack config, plus your aliases, and any other config that the IDE might need help finding. Also include the prefixed ~ aliases for importing styles into your Vue components.

/*
 |--------------------------------------------------------------------------
 | A fake config file for PhpStorm to enable aliases
 |--------------------------------------------------------------------------
 |
 |   File > Settings... > Languages & Frameworks > Javascript > Webpack
 |
 |   Select "Manually" and set the configuration file to this
 |
*/
const path = require('path');
const mixConfig = require('./../node_modules/laravel-mix/setup/webpack.config')();

module.exports = {
    ...mixConfig,
    resolve: {
        alias: {
            ...require('./alias'),
            '~@less' : path.resolve('@less'), // <-- 
        },
        ...mixConfig.resolve
    }
}

4. Set your IDE to use webpack/ide.config.js as your webpack config file.

Answer 12

Had the same problem on a new Laravel project with Jetstream. The webpack.config.js was present and correct. But PHPStorm still didn't recognize the @ symbol as a resource root.

After opening the webpack config, I got a notification:

After Clicking on Trust project and run, the @ symbol became recognized.

I know that this isn't the solution or use-case for everyone. But I still found it worthy to note on this post, because it helped me in my situation.

Using

• laravel/framework:8.77.1
• npm:8.3.0
• node:v14.18.1