Inlcude babel transpiling only for required Node_modules

Question

I have the following configuration for nextjs to handle ES6 code for IE11.

 module.exports = {
  poweredByHeader: false,
  distDir: "ssr_build",
  webpack(config) {
    config.node = { fs: "empty", net: "empty", tls: "empty" }
    config.plugins = config.plugins || []
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            [
              "next/babel",
              {
                targets: { ie: 11 },
              },
            ],
          ],
        },
      },
    })
    return config
  },
}

I was wondering if I could have a condition to transpile node_modules modules only if it's ES6, and not take time to transpile **everything . Help!**

Update1.0:

I have done finding the ES5 dependancies which require ES6 Conversion using: https://github.com/obahareth/are-you-es5 , created a regex for the exclude, didn't work. I will try once again to see if am missing child-child dependancies.

I have tried out - https://github.com/martpie/next-transpile-modules , unfortunately it requires all the node_modules to be inserted manually. That seems like a tedious process, and stopped that.

Answer 1

I see you have 2 options:

Option 1 (better one) - Investigate your dependencies. Most dependencies transpile themselves to ES5 on their build phase, and then you are ok. You can check their dist folder (usually), or just look at the docs or issues.

If you find out there are some dependencies who transpile to ES6, you can selectively transpile only those, using this next.js plugin: https://github.com/martpie/next-transpile-modules

Option 2 - If you don't know which node_modules actually contains ES6 code and you don't want to spend time figuring out about your project dependencies:

Configure @babel/preset-env with a config file as follows, and still scan all of your node-modules. This loader should transpile only the parts of code that needs to transpile based on your target environment.

{
  "targets": {
    "ie": "11"
  }
}