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
      |- ponents
      |  `- 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('ponents/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 pletion and Documentation lookup for 'ponents/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 .html
• mimicking anything below .idea related to node_modules

But no luck so far. Thanks.

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
      |- ponents
      |  `- 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('ponents/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 pletion and Documentation lookup for 'ponents/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./idea/help/configuring-javascript-libraries.html
• mimicking anything below .idea related to node_modules

But no luck so far. Thanks.

• javascript
• intellij-idea
• webpack
• reactjs

• 3 With the plex path resolution patterns that are described in Webpack config file, IJ can't guarantee that all methods are resolved without specific Webpack support. Please vote for the feature request and follow the updates. PS: however for me things work pretty good in sample react-starter project. – Ekaterina Prigara Commented Jul 2, 2015 at 9:48
• @EkaterinaPrigara Thanks for the tip. Renaming src to app did the trick! But things like import { Row, Column } from 'react-bootstrap'; still won't work while var reactBootstrap = require('react-bootstrap'); still does. This won't work in react-starter. I'm not answering my own question because I don't know why all this black magic happens. – Alfonso de la Osa Commented Jul 31, 2015 at 14:06
• this seems to work when you use the resolve.root approach as here (no idea why it doesn't allow src though.) It also works with resolve.alias but your alias has to be the same as the root folder name or it ain't going to work :(. – froginvasion Commented May 18, 2016 at 14:17
• Oh, my friend. After 1 year later, have still no hope from future. – Kutsan Kaplan Commented Oct 27, 2016 at 21:13
• 1 you can do to settings, then to project folders, and set some folders als lib folders, this should work – Alexander_F Commented Jan 3, 2017 at 12:06

1 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 pletion and documentation available now.