Babel pollutes compiled file with template literals after removing plugin

Question

I use webpack with babel-loader to build my webclient, but ie11 screams at template literals. But I use the plugin @babel/plugin-transform-template-literals and the preset @babel/preset-env. The complained code lines are by babel itself.

BTW: If I use babel-CLI with only the literals plugin on the babelized file it converts it correct to string concats.

shorten package.json devDepencies and browserlist:

"browserslist": [
        "> 1%",
        "not dead",
        "ie >= 11"
    ],
    "devDependencies": {
        "@babel/cli": "^7.6.0",
        "@babel/core": "^7.6.0",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/plugin-proposal-decorators": "^7.6.0",
        "@babel/plugin-transform-spread": "^7.2.2",
        "@babel/plugin-transform-template-literals": "^7.4.4",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.6.0",
        "@babel/types": "^7.6.1",
        "babel-loader": "^8.0.6",
        "babel-plugin-react": "1.0.0",
        "babel-plugin-react-html-attrs": "2.1.0",
        "babel-plugin-transform-object-assign": "6.22.0",
        "browserlist": "^1.0.1",
        "webpack": "^4.39.3"
    }

part of the webpack.js:

{
      test: /\.(js|jsx)?$/,
      exclude: /(node_modules|bower_components|disposables)/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            useBuiltIns: 'usage',
            //useBuiltIns: 'entry',
            corejs: { version: 3, proposals: true },
              debug: true,
            }],
          '@babel/preset-react',
        ],
        plugins: [
          'react-html-attrs',
          'transform-object-assign',
          ['@babel/plugin-proposal-decorators', {
            legacy: true
          }],
          ["@babel/plugin-proposal-class-properties", {
            "loose": true
          }],
          ['@babel/plugin-transform-spread', {
            'loose': true,
          }],
          //'syntax-dynamic-import',
          ['@babel/plugin-transform-template-literals', {
            //'loose': true,
          }],
        ],
        compact: true,
        minified: true,
      }

the complained area of the generated index.js (line with "throw new TypeError"):

/***/ "../node_modules/@babel/types/lib/asserts/assertNode.js":
/*!**************************************************************!*\
  !*** ../node_modules/@babel/types/lib/asserts/assertNode.js ***!
  \**************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = assertNode;

var _isNode = _interopRequireDefault(__webpack_require__(/*! ../validators/isNode */ "../node_modules/@babel/types/lib/validators/isNode.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function assertNode(node) {
  if (!(0, _isNode.default)(node)) {
    const type = node && node.type || JSON.stringify(node);
    throw new TypeError(`Not a valid node of type "${type}"`);
  }
}

/***/ }),

Error found:

Somewhere deep in the source was an unused import of an internal babel function. But those are nodeJS modules and don't run over babel itself. Killing the line solves the problem.

import { awaitExpression } from '@babel/types';

Jonny Jonny · Accepted Answer · 2019-09-18T11:20:20

The solution was somewhere deep in the source, where an unused import of an internal babel function. But those are nodeJS modules and don't run over babel itself. Killing the line solves the problem.

import { awaitExpression } from '@babel/types';

The developer of the "infected" file has also a simple explanation to what happened. He uses VS Code with an "auto import" plugin. If he types "await" and accidentally accepts the autocomplete suggestion, the source contains "awaitExpression". So the plugin found this "new class" in babel and adds the import to the babel file (top of file and out of sight). He corrects the "await" in the source but the import keeps in place. A small but devastating line of code.

Babel pollutes compiled file with template literals after removing plugin

1 Answers