Unexpected usage exception when using `handlebars`, `razor`, `scss` or `less`

I just got “Uncaught Error: Unexpected usage” myself. I found that there are so many issues and nobody seems to care. I looked into it and the root cause seems to be too simple to be true?

1. This always passed null as foreignModule argument https://github.com/microsoft/vscode/blob/b449c95a8460443ee6bf985bb6c8db63d395e6e6/src/vs/editor/editor.worker.ts#L30
2. The foreignModule variable inside the scope is never changed, so the second constructor argument here is always null too
3. This means this._foreignModuleFactory is always null as well https://github.com/microsoft/vscode/blob/b449c95a8460443ee6bf985bb6c8db63d395e6e6/src/vs/editor/common/services/editorSimpleWorker.ts#L342
4. Which prevents this if block from being entered https://github.com/microsoft/vscode/blob/b449c95a8460443ee6bf985bb6c8db63d395e6e6/src/vs/editor/common/services/editorSimpleWorker.ts#L645
5. And fall through to here https://github.com/microsoft/vscode/blob/b449c95a8460443ee6bf985bb6c8db63d395e6e6/src/vs/editor/common/services/editorSimpleWorker.ts#L662

@alexdima any idea why you did that (ignore the first worker message)? https://github.com/microsoft/vscode/commit/66091601a52d4f495e8b90c8c56283a5b1b07bd0

The issue can also be reproduced in the official ESM examples and it has likely been present from day one of ESM support. All you need to do is use a language that uses the generic worker, e.g. put handlebars here https://github.com/microsoft/monaco-editor-samples/blob/c5586a25cfd069349b6242a3d140223cc3d9110c/browser-esm-parcel/src/index.js#L23

[Prinzhorn]

Nice, thank you

[Prinzhorn]

Thanks for looking into this.

I am open to having made a mistake in this area, but if that is the case, can you please provide reproducible steps instead of an analysis?

Like I said, the official examples trigger the error (both browser-esm-parcel and browser-esm-webpack). Otherwise I’d probably not have made such bold claims 😅

Here are the detailed steps:

git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install .
npm run simpleserver

So far this is copied from the official example repo. Now update the language to one that needs a custom worker:

sed -i "s/language: 'javascript'/language: 'handlebars'/g" browser-esm-parcel/src/index.js

 monaco.editor.create(document.getElementById('container'), {
 	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
-	language: 'javascript'
+	language: 'handlebars'
 });

And now follow the official steps to build the parcel esm example

cd browser-esm-parcel 
npm install .
npm run build
npm run simpleserver

Visit http://localhost:9999/

Chromium

Firefox

Like I said this works equally for browser-esm-webpack, I just happen to use parcel for my projects.