[Bug]: Property left of BinaryExpression expected node to be of a type ["Expression"] but instead got "StringLiteral"

[loynoir]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

https://github.com/loynoir/reproduce-esbuild-1837.mjs

import * as t from "@babel/types";
console.log(
  t.binaryExpression("+", t.stringLiteral("x"), t.stringLiteral("y"))
);

esbuild --bundle ./index.mjs --inject:./shims.mjs --format=iife --outfile=./dist/output.js

Configuration file name

No response

Configuration

No response

Current and expected behavior

Expected

ESM context output

{type: "BinaryExpression", operator: "+", left: {…}, right: {…}}

Unexpected

iife context output

Uncaught TypeError: Property left of BinaryExpression expected node to be of a type ["Expression"] but instead got "StringLiteral"

Environment

Browser

deps:

    "@babel/types": "^7.16.0",
    "esbuild": "^0.14.2",
    "process": "^0.11.10"

Possible solution

evanw/esbuild#1837 (comment)

Additional context

No response

[babel-bot]

Hey @loynoir! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[lightmare]

Thanks for the link to possible solution, the explanation given there was very helpful.

I am partially responsible for this — as in, I wrote the PR #13843 that uses non-object this, which inadvertently plays into a bug in esbuild. I cloned your repro. repo and it produces this code:

  // node_modules/.pnpm/@babel+types@7.16.0/node_modules/@babel/types/lib/builders/builder.js
  var require_builder = __commonJS({
    "node_modules/.pnpm/@babel+types@7.16.0/node_modules/@babel/types/lib/builders/builder.js"(exports) {
      init_shims();
      "use strict"; 
      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.default = builder;
      var _definitions = require_definitions();
      var _validate = require_validate();
      function builder() {
        const type = this;
        ...

The builder function has to be strict mode, because this is supposed to be a string primitive. But there is init_shims(); inserted before "use strict"; which means it's no longer treated as strict mode directive. Consequently the builder function ends up being non-strict, and when called converts this (string primitive) to String object.

[nicolo-ribaudo]

Closing since this is an esbuild bug (which injects init_shims in the wrong place).