The right way to modify bundle output

[awxalbert]

It's a follow-up of this issue, since I haven't received a reply for weeks, so I opened a new issue.

[hyrious]

This should be an issue in tsup instead of in esbuild. I just took a look at your demo repo. My previous comment works in running esbuild directly. Here's the build script so you can try putting it in your project and run it:

// make.js
var fix_react_jsx_plugin = {
  name: "fix-react-jsx",
  setup({ onResolve }) {
    onResolve({ filter: /./ }, (args) => {
      if (args.path === "react/jsx-runtime") {
        return { path: args.path + ".js", external: true };
      }
    });
  },
};

require("esbuild").build({
  entryPoints: ["src/index.tsx"],
  external: ["react"],
  bundle: true,
  plugins: [fix_react_jsx_plugin],
  outdir: "dist",
  format: "esm",
});

Run node make.js yields dist/index.js to have react/jsx-runtime.js.

---

So what's wrong in tsup? It turns out that it has an external plugin which automatically externalizes peer dependencies and it is put before any user's custom plugin.

esbuildPlugins = [
	...,
	externalPlugin, // marks 'react/*' as external
	...userPlugins,
]

That's why you have no chance to modify the external path which was already handled in tsup.

---

As a workaround instead of dropping tsup, you can run esbuild on the final file with bundle enabled but externalize all paths in onResolve callbacks, like so:

var input = 'dist/index.mjs'
require('esbuild').build({
	entryPoints: [input],
	bundle: true,
	format: input.endsWith('.mjs') ? 'esm' : 'cjs',
	plugins: [{
	  name: "fix-react-jsx",
      setup({ onResolve }) {
        onResolve({ filter: /./ }, (args) => {
          if (args.kind === "entry-point") return null;
          let path = args.path;
          if (path === "react/jsx-runtime") path += ".js";
          return { path, external: true };
        });
      }
	}],
	allowOverwrite: true,
	outfile: input,
})

[nettybun]

Don't let perfection get in the way of good enough - a simple find and replace should be enough, without involving the AST. Yes it's a hack, but it will let you move on to real work.

output = output.replace(/from "react/jsx-runtime";/g, `from "react/jsx-runtime.js";`);

[evanw]

I didn't reply on that issue because my original comment still stands. You are trying to go against the conventions that the community uses, which is going to create extra work for you and for other people who try to use your code. I still recommend sticking with the way jsxImportSource is supposed to work instead of trying to change it.

I'm closing this issue because your question has been answered, both in that thread and in the above comments.