Esbuild: Duplicated identifier with react as external

[zmitry]

meta.out.txt
here is what I've got

and here is my config

const { build } = require("esbuild");

build({
  entryPoints: ["./src/index.js"],
  minify: false,
  define: {
    "process.env.NODE_ENV": '"development"'
  },
  outfile: "./out.js",
  bundle: true,
  target: "es2017",
  format: "esm",
  sourcemap: "external",
  external: ["assets/icons", "assets/images", "assets/styles", "react", "react-dom"],
}).then(console.log, console.error);

[zmitry]

Let me know what info you need to debug this.

[zmitry]

I suppose this is related to my local setup, I had inconsistent versions between react and react-is

[zmitry]

Okay, I've solved my issue with resolutions, I'm not quite sure if it was my issue or not. But i'm pretty satisfied with results, I set up two pass build with esbuild and then webpack as post processor and here is my result with 40k LoC typescript codebase

The only one issue that left is to somehow replace emotion plugin with custom pragma implementation but it seems to be tricky

[zmitry]

@evanw How would you recommend to migrate from styled-components/emotion stuff to esbuild.

[evanw]

Did you close this because it’s not a bug with esbuild? If you bundle something with esbuild and the resulting code has a syntax error, then that is a bug in esbuild and we should fix it.

[zmitry]

@evanw It might be a bug with my setup, I've solved this issue with setting up resolutions in my package.json. I don't want to bother ui with that bug because I have two pass setup with webpack and a lot of weird things might happen and the might not be related to esbuild.

[zmitry]

So, I did a bit of debugging, I can confirm, this is an esbuild issue.
This issue is reproducible for me on this conditions.
You have to use splitting: false, you have to mark react as external. Maybe you might need to use import() but I'm not sure about that. With this conditions esbuild creates duplicate import statements which is not valid react syntax.
@evanw
React version is fixed for the project and there is only one version of react in the bundle.

[evanw]

I’m unable to reproduce that with a simple example of a react code base with those build options. Is there a way you can provide a code sample that reproduces the problem?

[zmitry]

@evanw That might require some time to debug minimal example which I can shere. I will do that over weekends.

[evanw]

Is this still happening? If not, I'd like to close this issue.

[zmitry]

@evanw sorry, I did not use esbuild in production. So I didn't get a change to reproduce it.