ES Modules in node_modules. How to transpile?

[swernerx]

I am using Webpack 2 beta21 in some setup where I am trying to combine System.import auto chunks + HMR + SSR React. I am currently struggle with how to use modules in es2015 module syntax (as suggested by module/jsnext:main entries). As far as I understand I have to transpile that code. But normally we do not transpile any code from node_modules, correct? So how can I do that "basic" transpilation that I have a non-module output from all these different sources?

[andreypopp]

Webpack 2 should transpile ES module for you automatically.

[wegry]

@swernerx Do you already have something like babel and something like the presetbabel-babel-preset-es2015-native-modules (all transformations in babel except for ES module export and import) in place for your code excluding modules?

If so, your loader test for \.jsx? would go from something like

{
  test: /\.js/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: ['es2015']
  }
}

to

{
  test: /\.js/,
  // No exclude
  loader: 'babel-loader',
  query: {
    presets: ['es2015-native-modules']
  }
}

[Jessidhia]

jsnext:main or module code should always already be transpiled. The only difference is that they use ES6 module syntax instead of commonjs function calls.

Webpack does not transpile ES6 module syntax to commonjs modules, or even transpile commonjs; what it does is convert code using those respective module systems to use webpack's module system instead.

If the code pointed to inside the jsnext:main / module entry points needs any kind of transpilation to ES5 (besides, again, the module syntax itself), it is a bug with the module that has an incorrect build published.

@wegry don't use babel-preset-es2015-native-modules, use [ "babel-preset-es2015", { "modules": false } ].

[swernerx]

Yep that seems to work without. I was just confused by the problem that not all jsnext:main packages are correctly pre-transpiled. When these dependencies are ES5+modules then it works indeed fine together with webpack2. Thanks.

[catamphetamine]

@Kovensky I still don't understand how Webpack manages to require() all those jsnext:main modules: they all clearly are ES.next syntax and the resulting bundle is ES5 syntax (with node_modules explicitly excluded in the loader configuration), so it's obvious that Webpack does some kind of internal automatic transpiling of the require()d jsnext:main modules.

            {
                test    : /\.js$/,
                include :
                [
                    // `node_modules` not included
                    path.resolve(frontend_root_folder, 'code')
                ],
                loader: 'babel-loader'
            }

And it seems that it possibly does it wrong:
nfl/react-helmet#190
As for the [ "babel-preset-es2015", { "modules": false } ] workaround, why is it even doing anything?
Webpack clearly should be independent of Babel and how do Babel settings even relate to Webpack's behaviour of automagically transpiling jsnext:main modules.

[damianobarbati]

@swernerx did you manage to solve?

I really do not understand what's the current status in Webpack to transpile dependencies in node_modules, can anyone please clarify? I tried to stick to every issue opened here.

1. Is webpack transpiling jsnext:main file?
2. If yes, is webpack transpiling jsnext:main file in node_modules even if node_modules is in exclude key?

My situation:

rules: [{
    test: /\.(js|mjs)$/i,
    exclude: [/node_modules/],
    use: [{
        loader: 'babel-loader',
    },{
        loader: 'eslint-loader',
    }
}]

In my dependency package.json I tried:

"main": "index.js", <= not working (not transpiled)
"jsnext:main": "index.js", <= not working (not transpiled)

Neither is working without removing exclude: [/node_modules/], but this can't be used in any medium-to-big sized project because of infinite compilation times.

[damianobarbati]

I don't get it: why is https://github.com/lodash/lodash/blob/es/package.json any different from my https://github.com/damianobarbati/react-create-app/blob/master/package.json?
lodash-es is getting transpiled even being in node_modules (and excluded) but my react-create-app is not: HELP!

[flybayer]

I finally got a node_modules package to compile with babel-loader after hours of struggling.

The problem was that the package had it's own .babelrc published which was overriding my babel config (which is in my package.json).

node_modules/
  vue-match-media/
    .babelrc   <--- babel-loader was using this which didn't have my required config
    dist/
      index.js  <--- file I needed compiled
package.json  <--- contains the babel config I need everything to use
build/
  webpack.base.config.js <-- my weback config
src/

My solution is to set babelrc: false in the loader config and specify the babel config in the loader. However, I read this config from my package.json, so it's not duplicated.

var readPackageJson = require('read-pkg')
var babelOptions = readPackageJson.sync().babel
babelOptions.babelrc = false

// ... rest of config
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '..', 'node_modules/vue-match-media')],
        options: babelOptions,
      },