[BUG] tsup bundle problem

[jeffwcx]

🐛 Bug description

I'm working on a Vue JSX REPL, so I need to build a browser-based compiler. I found that @sxzz has implemented one at https://github.com/sxzz/vue-jsx-playground. It encountered the same issue during development (using esbuild with Vite).

Here is the screenshot of the problem:

After analyzing, I found that the issue is caused by the following import statement:

import syntaxJsx from '@babel/plugin-syntax-jsx';

This import syntax results in the following output when bundled with esbuild:

var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var require_lib11 = __commonJS({
  "../../node_modules/.pnpm/@babel+plugin-syntax-jsx@7.23.3_@babel+core@7.23.7/node_modules/@babel/plugin-syntax-jsx/lib/index.js"(exports) {
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = void 0;
    var _helperPluginUtils = require_lib10();
    exports.default = (0, _helperPluginUtils.declare)((api) => {
      api.assertVersion(7);
      return {
        name: "syntax-jsx",
        manipulateOptions(opts, parserOpts) {
          {
            if (parserOpts.plugins.some((p) => (Array.isArray(p) ? p[0] : p) === "typescript")) {
              return;
            }
          }
          parserOpts.plugins.push("jsx");
        }
      };
    });
  }
});
var import_plugin_syntax_jsx = __toESM(require_lib11(), 1);
var JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
var src_default = ({ types }) => ({
  name: "babel-plugin-jsx",
  inherits: import_plugin_syntax_jsx.default,
  ....

The __toESM function does not respect the __esModule property of @babel/plugin-syntax-jsx, resulting in the inherits variable pointing to the following module structure:

{
  default: {
     default: Module
  }
}

This is causing issues when detected by @babel/standalone.

🏞 Desired result

I'm not sure if esbuild's handling of this situation is incorrect. I would like to raise an issue to discuss it further.

For now, we can use the require method to bundle with tsup correctly:

import syntaxJsx =  require('@babel/plugin-syntax-jsx');

[sxzz]

Should fixed via 9dccd01 and released as 1.1.6.

[jeffwcx]

I have installed 1.1.6, it works.