esbuild bundle incorrectly

[Ronbb]

repo:
output.zip

When I used @antv/x6 with vite, I met the problem vitejs/vite#3413. And I reproduce the bug by using esbuild directly.

It seems that class ToolsView is used before definition:

/* ... */
var Button = class extends ToolsView.ToolItem // ...

/* ... */

var ToolsView = class extends View // ...

/* ... */

[hyrious]

I didn't reproduce your problem using your output.zip. Everything works fine.

[Ronbb]

@hyrious

Please try again:

1. Run in terminal:

yarn

yarn bundle

yarn  serve

2. Then open http://localhost:5000 and you will get Uncaught TypeError: Cannot read property 'ToolItem' of undefined in console.

[hyrious]

@Ronbb Reproduced. It also seems to be an issue with yarn2. After removing .yarn and .yarnrc.yml (so that we are using yarn1 or npm), it works fine.

[Ronbb]

@hyrious I try yarn2 with yarn config set nodeLinker node-modules and it works. Maybe this is a pnp bug.

[hyrious]

@Ronbb I checked the out/x6.js produced by the broken example, looks like through the @yarnpkg/esbuild-plugin-pnp plugin esbuild can only load commonjs files instead of esm ones. Maybe missing package.json's module info leads to esbuild can not load the esm files. (yarnpkg/berry#3185) And some circular dependencies results in wrong initializing order.

If you can bundle once instead of two steps, then it will also be fine:

1. change your first line of app.js to

   import { Graph, Node, Edge, Shape, ToolsView, NodeView, EdgeView } from '@antv/x6';

2. bundle.js:

   require('esbuild').build({
     entryPoints: ['app.js'],
     plugins: [require('@yarnpkg/esbuild-plugin-pnp').pnpPlugin()],
     bundle: true,
     outfile: 'out/out.js',
     sourcemap: true
   }).catch(() => process.exit(1))

[Ronbb]

@hyrious Thanks for your advice. However I'm using vite in my project. vite bundles deps firstly for optimization in dev mode, which causes this problem.

QAQ

[hyrious]

You can track the esm support in yarnpkg/berry#3185.

However I doubt it requires some virtual file system api in esbuild itself.

We can wait for evan's reply to see if it makes sense to support that.

[evanw]

From the discussion above and the linked issues, it sounds like the problem is the Yarn PnP plugin causes the package's main field to be used instead of the module field, which then results in the error. This is not a problem with esbuild. It's either a problem with the package or the plugin. It also sounds like there is a workaround available: vitejs/vite#3413 (comment).

Closing as this is not a problem with esbuild.