Stuck on dev server when embedded (run), but forking works

[kamranayub]

Summary

Embedded playgrounds do not load preview or finish compiling when including a webpack-dev-server-compiled UMD bundle into the files for the project. Forking the project works, as well as including a non-WDS production build of the UMD bundle.

Description of Bug

Running into a similar issue to other "infinite loading" issues where an embedded project created with the SDK never shows the preview. The "Compiling application & starting dev server..." is infinitely spinning.

The root cause is a JS file (excalibur.js) that we include, which is the output of a library bundle (UMD) from our webpack build. The JS file is a local copy of our library; what we want to enable is playgrounds reflecting local edits of the library vs. only relying on tagged npm packages that will be out-of-sync with local changes.

Without the JS file, everything works.

With the JS file, in development, it only works when forking the blitz, but not when trying to embed -- and HMR is broken even when forking. In production, it works fine -- the embedded preview works.

I believe this is due to webpack-dev-server (WDS) running locally through Docusaurus where it injects a bunch of HMR junk into the bundle. There could be other differences between the HMR build vs. the production non-WDS build. Stackblitz does not seem to like the JS file, at any rate. I've asked separately about how to get rid of the WDS/HMR chunks from the bundle.

Here is a Stackblitz fork with the WDS version of the JS file:

https://stackblitz.com/edit/fsgzdz?file=index.ts

(Preview works, but HMR does not)

Here is a Stackblitz with the PROD version of the JS file:

https://stackblitz.com/edit/eno9yc?file=index.ts

(Everything works, besides some typing issues we can fix)

Related Files:

• StackblitzPlayground.tsx: how we use the embed SDK to inject files
• docusaurus.config.ts: how we build and configure the library bundle

Steps to Reproduce

1. Clone https://github.com/excaliburjs/Excalibur
2. Check out kamranayub/docs-vnext (PR: feat: Docs vNext (Docusaurus Migration) excaliburjs/Excalibur#2793)
3. Run npm install, cd site, npm install, npm start to start Docusaurus
4. Go to http://localhost:3000/docs/fundamentals/actors
5. Scroll down to the Stackblitz embedded playground
6. Click to load
7. Watch as it spins forever
8. Click "Edit in Stackblitz"
9. Click "Fork"
10. Watch as it loads (but HMR still fails to work, and spinner still displays)

Note: When running locally, you can go to http://localhost:3000/excalibur.js to see the library bundle JS.

Expected Behavior

We would expect that Stackblitz could compile with any valid JS files, even ones generated under WDS/HMR, when embedding.

Things I've Tried

1. I've tried compiling it as a plain window output.library.type JS file
2. I've tried renaming it from excalibur.js to excalibur.ts (no difference)
3. I've tried including it as a script tag in index.html
4. I've tried minimizing using TerserPlugin and turning off minimizing (current)
5. I've tried importing different ways like import './excalibur' (for window library)

We do not have to import our library as a module; we could also include it as a script on the page (my initial idea), but this wasn't working when I tried (related to #2547, #188).

Screenshots/Screencast

Embedded/Run: Locally, infinitely loading

Fork: Working but not with HMR

Notice that the box is red instead of the Green I typed in and saved.

Embedded/Run: Working in production

Additional Context/Questions
Add any other context or questions regarding this bug.