How do I make WebStorm recognize a locally imported file when a script is being dynamically loaded?

Question

I have a node.js application that looks like this:

src/
src/app-loader.js
src/common/utils.js
src/plugin/index.js

app-loader.js dynamically loads plugin/index.js in such a way that the following code in plugin/index.js is valid:

import Thing from 'common/utils'

WebStorm flags that line as an invalid import, because from its perspective, common/utils.js would map to an npm package, and ./common/util.js would map to src/plugin/common/util.js. It doesn't know about app-loader.js

How do I tell WebStorm to do it my way rather than what it normally does? I've tried looking at the project Preferences and on the right-click context menu in the project pane, but nothing stands out as the right solution. Ideally, if I Ctrl+Click on the import statement, it would also take me to the correct file.

Answer 1

If all imports are resolved from the src folder, mark it as a "Resource root" from the folder context menu in Project view. If you have more complex resolution rules that are described in a webpack configuration file, specify path to this config in the IDE Preferences | Languages and Frameworks | JavaScript | Webpack.

You can find more on the topic of imports in WebStorm in this blog post.