How to make IntelliJ IDEA resolve webpack requires

Question

IntelliJ cannot resolve javascript modules called with webpack requires which are not inside the node_modules directory

Imagine this project structure:

`- project
   |- node_modules
   |  `- react
   |     `- addons.js
   |- webpack.config.js
   |- util
   |  `- tool.js
   `- src
      |- components
      |  `- uno.jsx
      `- two.jsx

This is my webpack config

// webpack.config.js
var path = require('path'); 
module.exports = {
  resolve: {
    root: [
      path.resolve('./src'),
      path.resolve('./')
    ]
  }
  ...
}

And this is how I use webpack's require

// two.js
var React = require('react/addons');
var One = require('components/one');
var Tool = require('util/tool');
// dosomething

So this works perfectly within my application, and IntelliJ looks happy with 'react/addons', how to make understand the sources for navigation, code completion and Documentation lookup for 'components/one' and 'util/tool'?

I've tried so far:

• adding a package.json inside src (npm init)
• adding src as a Javascript library in Settings / Languages & Frameworks following this https://www.jetbrains.com/idea/help/configuring-javascript-libraries.html
• mimicking anything below .idea related to node_modules

But no luck so far. Thanks.

Answer 1

I think this should work (or so it did in my case anyway).

In IntelliJ:

1. Open the project
2. File > Project Structure
3. On the left hand side, select Modules
4. From your directory structure, select the folders where your sources are (util and src) and mark them as Resources
5. Click Apply

You should have code completion and documentation available now.