microsoft / microsoft/typespec

[Bug]: playground - Published package references monaco workers via hard-coded /assets/... URLs, breaking every consumer

Open
#11,991 1 comment 1 reaction 1 assignee Claimed by @iscai-msft View on GitHub
bug design:needed triaged:core ui:playground
Dominant language
Java
Stars
5.9k
Forks
394
Avg merge
1d 23h
Merged PRs (30d)
104

Description

### Describe the bug

Since `@typespec/playground@0.17.1`, the published package loads its monaco workers from
hard-coded absolute URLs pointing into the package's *own* build output layout:

`node_modules/@typespec/playground/dist/editor.worker-Biegl0p7.js`
```js
function WorkerWrapper(options) {
return new Worker("/assets/editor.worker-CBxI71al.js", { name: options?.name });
}
```

`node_modules/@typespec/playground/dist/json.worker-j8mDmDqS.js`
```js
return new Worker("/assets/json.worker-BMpfVdM-.js", { name: options?.name });
```

Both files exist in the package (`dist/assets/editor.worker-CBxI71al.js`,
`dist/assets/json.worker-BMpfVdM-.js`), but the URL is a site-root absolute path, so it only
resolves if the consuming app happens to serve the package's `dist/assets` folder at `/assets`.
In any downstream app (and with any non-`/` base path), `GET /assets/editor.worker-CBxI71al.js`
falls through to the SPA fallback and returns `index.html`.

In 0.17.0 the workers were still plain `?worker` imports that the consumer's bundler resolved:

```js
const { default: editorWorker } = await import("monaco-editor/esm/vs/editor/editor.worker?worker");
```

### Actual behavior

The monaco workers never start and the console shows:

```
Uncaught SyntaxError: Unexpected token '<'
at http://localhost:5173/assets/editor.worker-CBxI71al.js
Uncaught [object ErrorEvent]
at .../monaco-editor/esm/vs/base/common/errors.js
```

### Expected behavior

The worker assets are resolved relative to the module that requests them (e.g. via
`new URL(..., import.meta.url)` or by leaving the `monaco-editor/...?worker` imports to the
consuming bundler), so they keep working regardless of where the consumer serves the app from
and under any `base`.

### Affected versions

| version | worker loading |
| --- | --- |
| 0.17.0, 0.17.1-dev.0, 0.17.1-dev.1 | `?worker` import, works |
| 0.17.1-dev.2, 0.17.1, 0.17.2-dev.1, 0.18.0-dev.2 | hard-coded `/assets/...`, broken |

So the regression was introduced between `0.17.1-dev.1` and `0.17.1-dev.2`, most likely by the
change that made the playground's own build pre-bundle the monaco workers instead of re-exporting
the `?worker` imports.

### Workaround for consumers

Serve the package's asset folder from the site root, e.g. as a small Vite plugin:

```ts
const assetsDir = join(dirname(require.resolve("@typespec/playground")), "assets");
// dev: middleware serving /assets/ from assetsDir
// build: this.emitFile({ type: "asset", fileName: `assets/${file}`, source: readFileSync(...) })
```

### Reproduction

1. Create a Vite app that depends on `@typespec/playground@0.17.1` (same setup as
`packages/playground-website`) and calls `registerMonacoDefaultWorkersForVite()`.
2. Run the dev server or serve a production build.
3. Open the playground and watch the browser console.

### Checklist

- [x] Follow our [Code of Conduct](https://github.com/microsoft/typespec/blob/main/CODE_OF_CONDUCT.md)
- [x] Check that there isn't already an issue that request the same bug to avoid creating a duplicate.
- [x] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Microsoft/typespec/discussions).
- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.