How to exclude core-js using useBuiltIns: "usage"

Question

Using babel 7.5.5, core-js 3.1.4 and webpack 4.38.0, how can I exclude core-js from transpiling?

I do not want to exclude node_modules altogether since I have libs that need transpiling

If I use exclude: /node_modules\/(core-js)/, a core-js module throws

TypeError: $ is not a function

This leaves me with two other options.

1. Use includes instead, include my src directory and every dependency that needs transpiling one by one
2. Use useBuiltIns: entry instead of usage, since in this case exclude: /node_modules/\(core-js)/ works, and import core.js at the top of main.js

Both of these options don't really seem like good solutions to me since usage is "no longer experimental" since 7.4.

Is there any way to make it work using usage? Is it a bug in either babel-loader or babel? Or is my configuration at fault?

This is my Webpack config:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: {
        main: ['./src/main'],
    },
    output: {
        path: path.resolve(__dirname, './build/'),
        publicPath: '/build/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules\/(core-js)/,

                use: {
                    loader: 'babel-loader'
                },
            },
            {
                test: require.resolve('jquery'),
                use: [
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
};

This is my babel config:

module.exports = function (api) {
    api.cache(true);

    return {
        presets: [
            [
                '@babel/preset-env',
                {
                    corejs: {
                        version: 3,
                    },
                    useBuiltIns: 'usage',
                }
            ]
        ],
    };
};

You can reproduce the error with the following repository: https://github.com/tomm1996/usebuiltins-exclude-test

Remorseless

I'm facing the same problem, you may have a look at github.com/babel/babel/issues/7559 and github.com/zloirock/core-js/issues/743 I don't have a solution at the moment but I'll keep you updated – Dynamotor

@YvesM. much appreciated. I've been falling back to just using entry instead since running into this issue – Remorseless

Answer 1

You need to exclude both core-js and webpack/buildin from the Babel transpilation.

You can use the folling exclude Regexes:

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/
]

Here is also a complete babel-loader configuration with some useful comments:

{
  module : {
    rules : [{
      test : /\.js$/,
      // Some module should not be transpiled by Babel
      // See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215
      exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
      loader : "babel-loader",
      options : {
        babelrc : false,
        // Fixes "TypeError: __webpack_require__(...) is not a function"
        // https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
        // https://babeljs.io/docs/en/options#sourcetype
        sourceType : "unambiguous",
        presets : [
          ["@babel/preset-env", {
            // Webpack supports ES Modules out of the box and therefore doesn’t require
            // import/export to be transpiled resulting in smaller builds, and better tree
            // shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
            modules : false,
            // Adds specific imports for polyfills when they are used in each file.
            // Take advantage of the fact that a bundler will load the polyfill only once.
            useBuiltIns : "usage",
            corejs : {
              version : "3",
              proposals : true
            }
          }]
        ]
      }
    }
  }
}

See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215

---

Edit: Also if you try to use @babel/plugin-transform-runtime:

plugins : [
  // Require the Babel runtime as a separate module to avoid the duplication
  // https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code
  ["@babel/plugin-transform-runtime", {
    // Requires @babel/runtime-corejs3
    // https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
    corejs : { version: 3, proposals: true }
  }],
}

You may run into a similar error:

Uncaught TypeError: _typeof2 is not a function
    at _typeof (typeof.js:8)
    at eval (sockjs.js:123)
    at Object.eval (sockjs.js:131)
    at eval (sockjs.js:6565)
    at Object../node_modules/sockjs-client/dist/sockjs.js (main.js:13790)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:110:14)
    at Object../node_modules/webpack-dev-server/client/clients/SockJSClient.js (main.js:13874)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/socket.js?:56:41)

This can be solved by excluding @babel/runtime-corejs3 from the transpilation:

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/,
  /@babel\/runtime-corejs3/
]

Dynamotor

this answer seems promising. I'll accept it once I confirmed it working with jquery too – Remorseless

I was able to confirm your solution working in multiple configurations. Thank you! – Remorseless

Yeah! Nice! Thanks for your feedback @TomM – Dynamotor

@YvesM. I'm not able to get this to work. Here is a new question I started.. could you be kind enough to lend your expertise please? #61579288 – Hedveh