Cannot Resolve Imports when using babel-resolver

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, https://youtrack.jetbrains.com/issues/WEB, to let other users vote for it.

https://youtrack.jetbrains.com/issue/WEB-28241

Please Vote if you read this! :P

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).

See https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0 for one more possible workaround

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

Glad to hear that Stuart

Thanks Chris!

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:

System.config({ 
  '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)
    .reduce(
      (acc, key) => ({ ...acc, [key]: path.resolve(__dirname, alias[key]) }),
      {}
    );
};

module.exports = {
  resolve: {
    alias: {
      ...getBabelAlias()
    }
  }
};

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": {
      "@/*": [
        "./src/*"
      ],
      "@test/*": [
        "./test/*"
      ],
    }
  }
}

For anyone that's using previous solution and if it does not work please try adding the 

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

into tsconfig.json