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:

.babelrc

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

Example file using it:

FooterAction.js

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 :(

10 comments
Comment actions Permalink

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.

0
Comment actions Permalink

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.

10
Comment actions Permalink

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

5
Comment actions Permalink

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

1
Comment actions Permalink

Glad to hear that Stuart

0
Comment actions Permalink

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.

 

1
Comment actions Permalink

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)

0

Please sign in to leave a comment.