Webpack configuration for compiling module in node_modules

Question

I have problem with my webpack/babel configuration. I have installed my component-repository (es6 module without webpack configuration inside) as node_module. And in this s

Answer 1

Did you install the es2015 preset?

npm install babel-preset-es2015

First Option

And the loader could look like this then:

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /bower_components/,
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

This loader should go through all your modules now (but be aware: Also through all node_modules) and compiles them. The preset es2015 is managing your ES6 syntax and transpiles it to es5.

Second Option

Install your own node modules to a own directory

mkdir -p ./install/here/own_packages
npm install --prefix ./install/here <package>

So you can do this in your webpack.config

loaders: [

  {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

There, all files inside the node_modules folder (and bower_components) are getting ignored. You can install your own npm modules then in src/js/components (or wherever) with the above command line.

Answer 2

Late post but I ran into this exact situation today. For me the problem was caused by the babel require hook:

https://babeljs.io/docs/usage/require/

NOTE: By default all requires to node_modules will be ignored.

Basically, babel was not being used for any require pointing to node_modules. This is why the code worked for npm linked modules, I am guessing babel skips the ignore because the path does not contain node_modules.

I was able to fix this by changing the ignore logic in require hook, like so:

require('babel-register')({
  extensions: [".es6", ".es", ".jsx", ".js"],
  ignore: (absPath) => {
    if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) {
      return true;
    } else if (absPath.indexOf('es6_module') > -1) {
      return false;
    } else if (absPath.indexOf('node_modules') > -1) {
      return true;
    }
    return false;
  }
});

Of course, make sure your loader has the same logic:

loaders: [

  {
    test: /\.jsx?$/,
    exclude: (absPath) => {
      if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) {
        return true;
      } else if (absPath.indexOf('es6_module') > -1) {
        return false;
      } else if (absPath.indexOf('node_modules') > -1) {
        return true;
      }
      return false;
    }
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

Answer 3

Many projects that are used as dependencies make sure to compile down to ES5 before an npm publish.

This is useful for a couple reasons.

1. The code can simply be added to a web browser with a <script> and it will work
2. It makes no presumption about the bundling tool that the consuming application will use

One way to achieve this is to pass the library code through babel before publishing to npm.

When setting up, I took inspiration from the React Bootstrap project. But that was mainly because we wanted to build portable, styled components. However, the way they set up the library for use is pretty nice IMO.

After setting up like this, the consuming applications configuration is very simple, because there is no babel compile to be done. The module bundler (like webpack) can then just bundle the module (as it does for other node_modules dependences).