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 situation it is not working - I got 'Unexpected token import' error (babel doesn't transpile es6 code)

But If I linked external folder to node_modules (npm link ./../../component-repository) then it is working correctly without any errors. I spent a lot of time on it and still can't solve this problem.

Main problem is how to share react components between various projects. My idea is to add them as dependency.

edit: How to set webpack&babel for project to compile ES6 module from node_modules folder ? Solution with npm link to sibling folder will not work for production.

edit2: Reason why I keep es6 code in module is that on local environment I want to npm link sibling folder with components (I can edit components and then commit changes to their repository). I share components between 3 projects. But on production I want to install them from git repository automatically as dependency

Structure on local env:

• components (also independent git repository)
• project1
  • node_modules
  • components (linked from ../../components)
• project2
  • node_modules
  • components (linked from ../../components)

Structure for production:

• project1
  • node_modules
  • components (as dependency from git repository)

Answer 1

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']
        }
  }