Vite build freezes after transforming modules

[tobistobi]

Hi!

I have a small project that uses vite v4.4.2 and some babylon.js dependencies (imported as node modules). I never had problems building vite before but here the build process simply freezes after transforming modules (on my machine as well as on render.com). Any hints on how to debug this? Any hints what it could be?

thx a lot for help!

[tobistobi]

I get the following vite build errors ...

vite v4.4.2 building for production...
vite:esbuild 24.45ms tsconfck init /Users/tobistobi/Dev/vite-webgpu_test +0ms
✓ 1230 modules transformed.
vite:esbuild esbuild error with options used: {
sourcemap: true,
sourcefile: 'assets/index-!{001}.js',
charset: 'utf8',
jsxDev: false,
target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
format: 'esm',
supported: { 'dynamic-import': true, 'import-meta': true },
minify: true,
treeShaking: true,
loader: 'js',
tsconfigRaw: { compilerOptions: { useDefineForClassFields: false } }
} +10s

[patak-dev]

If this works in 4.3, you should try to create a minimal reproduction and an issue on the repo so we can review the regression.

[tobistobi]

@patak-dev no, doesn't build in 4.3.9 either, same problem. Any hints?
Runs fine using npm run dev

vite v4.3.9 building for production...
  vite:esbuild 25.83ms tsconfck init /Users/tobistobi/Dev/vite-webgpu_test +0ms
✓ 1230 modules transformed.
  vite:esbuild esbuild error with options used:  {
  sourcemap: true,
  sourcefile: 'assets/index-!~{001}~.js',
  charset: 'utf8',
  jsxDev: false,
  target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  format: 'esm',
  supported: { 'dynamic-import': true, 'import-meta': true },
  minify: true,
  treeShaking: true,
  loader: 'js',
  tsconfigRaw: {
    compilerOptions: { useDefineForClassFields: false, target: undefined }
  }
} +10s

[patak-dev]

I still think you should create a minimal reproduction.

[tobistobi]

@patak-dev thx & ok - worked out what causes the error:
I have a main.js (which I just post the relevant beginning here). Once I comment out the last line await engine.initAsync(); it builds without problem, but if I leave it in, it crashes ... ideas?

import * as BABYLON from '@babylonjs/core';
//import '@babylonjs/loaders';


// Get the canvas element from the DOM.
const canvas = document.getElementById("renderCanvas");

// Create a Babylon.js engine using WebGPU
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();

[tobistobi]

documentation for the await on top level from babylon api docu

[tobistobi]

@patak-dev here is a minimal reproduction which can be cloned from github HTTPS-Link

npm run dev works with no problems
npm run build crashes

commenting out await engine.initAsync(); in main.js solves the build problem but kills the code ...

FYI – code only runs in CHROME v113 and newer due to being WebGPU implementation

[patak-dev]

Top-level await isn't supported in Vite's default browsers target.

You can:

• Change the init to a promise or do it inside a function
• https://vitejs.dev/config/build-options.html#build-target
• use a plugin like https://github.com/Menci/vite-plugin-top-level-await

[tobistobi]

Thx for giving support! Changing the build target to esnext does the trick.

[tobistobi]

@patak-dev or anyone else who can help here? Not making progress with solving this ...

[vadimvalid]

These solutions helped me https://stackoverflow.com/a/77616321/10120466 and https://stackoverflow.com/a/76920975/10120466