Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pixijs built with Bun.build fails to run in-browser whereas esbuild's succeeds #9360

Open
tsujp opened this issue Mar 11, 2024 · 1 comment
Open

Pixijs built with Bun.build fails to run in-browser whereas esbuild's succeeds #9360

tsujp opened this issue Mar 11, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@tsujp
Copy link

tsujp commented Mar 11, 2024 •
edited
Loading

What version of Bun is running?

1.0.30+1424a196f

What platform is your computer?

Darwin 23.3.0 arm64 arm

What steps can reproduce the bug?

Execution steps

Source files are lower down in this section for your copy-pasting.

  1. Create files with (the below) contents.
  2. bun run build_bun.ts and use Bun.serve to observe the reported error.
  3. bun run build_esbuild.mjs and use Bun.serve to see a black WebGL canvas created without error.

Source files

./src/index.ts

import { Application } from 'pixi.js'

const app = new Application()
await app.init({ width: 640, height: 360 })
document.body.appendChild(app.canvas)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Foobar</title>
    <style>
      body {
        margin: 0;
      }
  </style>
  </head>
  <body>
    <script type="module" src="../out/index.js"></script>
  </body>
</html>

Build files

Bun's version: build_bun.ts

// The resulting bundle fails to run in both Firefox and Chrome.
await Bun.build({
  entrypoints: ['./src/index.ts'],
  outdir: './out',
})

esbuild's version: build_esbuild.mjs

import * as esbuild from 'esbuild'

// Note not even specifically targeting browsers in esbuilds config.
await esbuild.build({
  entryPoints: ['./src/index.ts'],
  bundle: true,
  outfile: './out/index.js',
  format: 'esm'
})

Packages

package.json

{
  "name": "foo",
  "private": true,
  "version": "0.1.0",
  "author": "foo",
  "license": "BSD-3-Clause",
  "type": "module",
  "scripts": {},
  "repository": {
    "type": "git"
  },
  "keywords": [],
  "dependencies": {
    "pixi.js": "^8.0.1"
  },
  "devDependencies": {
    "@types/bun": "^1.0.0",
    "esbuild": "^0.20.1"
  }
}

Resolved package versions

$ bun pm ls
├── @types/bun@1.0.8
├── esbuild@0.20.1
└── pixi.js@8.0.1

What is the expected behavior?

Seeing a black WebGL canvas of the specified resolution with no errors in the browser console.

What do you see instead?

A DOM without a WebGL canvas and the following (equivalent) errors in the console for Firefox and Chrome respectively.

TypeError: class heritage eventemitter3_default is not an object or null
    <anonymous> http://localhost:3000/out/index.js:2610

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at index.js:2610:25

Additional information

Browsers tested:

  • Firefox 123.0.1 on said macOS version.
  • Chrome Version 122.0.6261.111 (Official Build) (arm64) on said macOS version.

Minimal Reproduceable Example

See: https://github.com/tsujp/pixijs_bun_bug_mre
@tsujp tsujp added the bug Something isn't working label Mar 11, 2024
@tsujp
Copy link
Author

tsujp commented Mar 11, 2024

I've added an MRE repo for easier bug squashing: https://github.com/tsujp/pixijs_bun_bug_mre

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tsujp