Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useBuiltIns: "entry" of @babel/preset-env breaks webpack's minimizer

See original GitHub issue

Bug Report

I would like to work on a fix!

Current Behavior useBuiltIn: “entry” of @babel/preset-env breaks webpack’s minimize plugin(terser-webpack-plugin) Output Code contains

/* 237 */
/***/ (function(module, exports) {

module.exports = __CoreJS.modules.es.string.ends-with;

/***/ }),

error message: Unexpected token: keyword (with)

Input Code

REPL or Repo link if applicable:

import 'core-js';

while core-js is imported as a webpack external whose global name is __CoreJS

Expected behavior/code will not break terser-webpack-plugin

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: babel.config.js

const presets = [
    "@babel/preset-react",
    ["@babel/preset-env", { "modules": "cjs", "useBuiltIns": "entry", "corejs": {"version": "3.6", "proposals": true}}]
];
const plugins = [
    "@babel/plugin-transform-async-to-generator",
    ["@babel/plugin-proposal-private-methods", { "loose": true }],

    // previous preset "stage-0"
    // Stage 0
    "@babel/plugin-proposal-function-bind",
    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",
    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-json-strings",

    ["@babel/plugin-transform-runtime", { "corejs": false, "helpers": true, "regenerator": false, "version": "7.7.7"}],
];
module.exports = function(api) {
     return {presets, plugins};    
}

Environment

  System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
  Binaries:
    Node: 12.13.0 - /usr/bin/node
    Yarn: 1.19.0 - /usr/bin/yarn
    npm: 6.12.0 - /usr/bin/npm

Babel version(s): 7.7.5 (@babel/core 7.7.7)
Node/npm version: Node.js 12.13.0/npm 6.12.0
OS: CentOS 7
Monorepo: yes
How you are using Babel: babel-loader

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

Issue Analytics

State:
Created 4 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

2reactions

fancy-rabbitcommented, Dec 23, 2019

removing “modules”:“cjs” could lead to some compatibility problems in our project because not all the modules are ES2015 compliant(i.e. use import and module.exports) and they work well with Babel 6 defaults, huh… modifying them could be a big project.

Replacing import ‘core-js’ with import “core-js/modules/es.string.ends-with” works without problem.

1reaction

fancy-rabbitcommented, Dec 23, 2019

@ethan-pearce maybe we’d better move to https://github.com/webpack/webpack/issues/10172

Top Results From Across the Web

Confused about useBuiltIns option of @babel/preset-env ...

1) Do I need to use that useBuiltIns: "entry" option? Yes, if you want to include polyfills based on your target environment. TL;DR....

babel-loader - webpack

This package allows transpiling JavaScript files using Babel and webpack. ... npm install -D babel-loader @babel/core @babel/preset-env webpack ...

babel/preset-env - Babel 中文文档

babel /preset-env` is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, ......

Doing Differential Serving in 2019 - Web Performance Calendar

In Phil's original article, he used Babel 6's babel-preset-env to achieve this. ... Configuring webpack for differential serving.

Webpack configuration | Javascript by Flo - GinkoNote

Here is a complete configuration of Webpack 4 from scratch to understand how ... @babel/preset-env @babel/preset-react babel-loader babel-plugin-lodash ...