Posted in Uncategorized

ES Modules in node_modules. How to transpile?

   February 23, 2021  3 Comments on ES Modules in node_modules. How to transpile?

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?

Author: Fantashit

3 thoughts on “ES Modules in node_modules. How to transpile?”

  2. 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 } ].

  3. 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,
      },

Comments are closed.