Cannot Resolve Imports when using babel-resolver

a team I'm working with is using babel-resolver which cuts down on all the crazy '../../../'

Consequently in WebStorm I can no longer simply do command + click on the imported file to get to it quickly.  This is very painful.  Especially when I'm so used to jumping to anything I want to quickly in webstorm like this.  We're working with React.

So here's our setup:


"presets": [
"plugins": [
["module-resolver", {
"root": ["./src/app"],
"alias": {
"app": "./src/app",
"config": "./src/app/config",
"test": "./src/test"
"env": {
"test": {},
"storybook": {}

Example file using it:


import { helperGetApiHeaders, helperGetApiRoute } from 'helpers/ApiHelper';

I cannot command + click ApiHelper, nor can I command + click the imports helperGetApiHelpers, or helperGetApiRoute

Side: I'm also getting frustrated with your forum here, the formatting of the text is all wacky when I paste code vs. plain text in this form and no way to really fix it...the editor kinda blows :(


I don't think we'd ever put efforts on adding special support for certain babel plugin... anyway, please feel free to file a request for this feature to youtrack,, to let other users vote for it.


The best you can do for now is right click on both 'src/app' and 'src' directories and select 'Mark Directory as -> Resource Root'. Webstorm will treat all subfolders as accessible from absolute paths. If you use webpack, instead of this plugin you can use 

resolve: { modules: ['node_modules', path.resolve('./src')] }

in webpack config file.


A workaround for those who are using a babel plugin module resolver like `babel-resolver` or `babel-plugin-module-resolver` or any other plugin, and cannot use the workaround suggested by Chris (where he sticks to the folder names), for example having gone with `#myAlias` or `~myAlias` is to replicate in their `webpack.config.js` or create a junk webpack.junk.js and replicate all the aliases in it


// webpack.junk.js
const path = require('path')

module.exports = {
resolve: {
alias: {
'#root': path.resolve(__dirname, './'),
'#src': path.resolve(__dirname, './src'),
'#styles': path.resolve(__dirname, './src/styles')
// ... and so on

and point to it in the settings (Language & Frameworks > Javascript > Webpack)

Meanwhile it would be awesome that the JetBrains team implements a much easier solution and that would suit everybody's needs: a feature be to be able to manually set aliases for paths in Webstorm, instead of supporting a specific babel module resolver plugin (not gonna please everybody + will take ages to be implemented apparently (1 year since the feature request related to this post got created).


Thank you Chris, your solution made my day!  command click module links a hoy!!


Glad to hear that Stuart


While I confirm what Chris suggested works fine, I liked more the proposition by the link Elena's provided.

Create a file named any_name.js in the projecct root with the following content:

'paths': {
'*': './src/*'

And it's done. You're free to ignore it in your .gitignore or ./git/info/exclude.



That's worked for me with babel-resolver

/* eslint-disable */
const babelConfig = require('./babel.config');
const path = require('path');

const getBabelAlias = () => {
const [_, { alias }] = babelConfig.plugins.find(([name]) => name === 'module-resolver');
return Object.keys(alias)
(acc, key) => ({ ...acc, [key]: path.resolve(__dirname, alias[key]) }),

module.exports = {
resolve: {
alias: {

Don't forget to point Webpack configuration file to this in (Language & Frameworks > Javascript > Webpack)


After trying the different solutions provided here it did not work (probably because my config and aliases are different).

So I was able to make it works with a different solution that I would like to share:

Create a file `jsconfig.json` at the root of your project:

Then add the following for instance:

"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"@test/*": [



Please sign in to leave a comment.