Webpack and Babel not transpiling a dependency inside node_modules that breaks IE 11 and Edge due to ES6's spread syntax

Question

I have a project that uses @mdx-js/runtime and it completely breaks on IE 11 or Edge ( Edge 44.18362.449.0 ):

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

It actually breaks because of the spread syntax here:

const allNodes = sortedNodes.map(({ start: _, ...node }, i) => { 

This line of code comes from remark-mdx , which is a dependency of @mdx-js/runtime , particularly this file and line: https://github.com/mdx-js/mdx/blob/master/packages/remark-mdx/extract-imports-and-exports.js#L66

I've been trying to get Webpack and Babel to transform that file so that the spread is no longer there:

Browserlist:

If I run npx browserslist I can see IE 11 is there.

"browserslist": [
    "> 0.5%",
    "last 2 version",
    "Firefox ESR",
    "not dead",
    "iOS >= 9"
]

.babelrc:

I've tried disabling loose mode and adding @babel/plugin-transform-spread and @babel/plugin-proposal-object-rest-spread , but didn't fix the issue.

  {
    "presets": [[
        "@babel/preset-env", {
            "useBuiltIns": "usage",
            "loose": false, // Was true before
            "modules": "auto",
            "corejs": 3
        }],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],

    "plugins": [
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {
            "loose": true
        }],
        "@babel/plugin-transform-spread", // Just added
        "@babel/plugin-proposal-object-rest-spread", // Just added
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "react-hot-loader/babel"
    ]
}

webpack.config.js:

Here I tried explicitly including remark-mdx and @mdx-js/runtime and also removing the exclude property or changing it to /node_modules\\/(?!(remark-mdx|@mdx-js\\/runtime)\\/).*/ , but nothing seems to work:

  {
    test: /\.(j|t)sx?$/,
    include: [
      path.resolve(__dirname, 'src'),
      // Tried explicitly adding these 2:
      path.resolve('node_modules/remark-mdx'),
      path.resolve('node_modules/@mdx-js/runtime'),
    ],
    // Tried removing `exclude` or not excluding those 2 packages:
    // exclude: /node_modules/,
    // exclude: /node_modules\/(?!(remark-mdx|@mdx-js\/runtime)\/).*/,
    use: [{
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        babelrc: true,
      }
    }],
  }

I'm using Babel 7 an Webpack 4.

Answer 1

Ok, it turns out to process files inside node_modules you need to use babel.config.js rather than .babelrc as explained here and here :

What's your use case?

• You are using a monorepo?

• You want to compile node_modules?

  babel.config.json is for you!

• You have a configuration that only applies to a single part of your project?

  .babelrc.json is for you!

Also, if you are using a monorepo you need to set rootMode: 'upward' so that Babel can find your new config file, as explained here .

Webpack's babel-loader config should look something like this:

  {
    test: /\.(j|t)sx?$/,
    include: [
      path.resolve(__dirname, 'src'),
      // No need to add @mdx-js/runtime, just add the problematic package:
      path.resolve('node_modules/remark-mdx'),
    ],
    // You also need to exclude it from the exclusions:
    exclude: /node_modules\/(?!(remark-mdx)\/).*/,
    use: [{
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        // And replace .babelrc with babel.config.json...
        babelrc: false,
        // ...which might also mean you need this if you are using a monorepo:
        rootMode: 'upward',
      }
    }],
  }

After this change the file was being processed, but I was getting a different error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

In this case, I had to add sourceType: "unambiguous" to babel.config.json , as remark-mdx was using CommonJS modules rather than ES6 ones. You can add this at the root of your babel.config.json file or inside overrides , so that it only targets packages inside node_modules .

For more on why this happens, see How do I use babel's `useBuiltIns: 'usage'` option on the vendors bundle? .

Babel's babel.config.json ended up looking like this:

{
    "presets": [[
        "@babel/preset-env", {
            "useBuiltIns": "usage",
            "loose": true,
            "modules": "auto",
            "corejs": 3
        }],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],

    "plugins": [
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {
            "loose": true
        }],
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "react-hot-loader/babel"
    ],

    "overrides": [{
        "test": "./node_modules",
        "sourceType": "unambiguous"
    }]
}