unknown Expression of type "ClassExpression

[cenkce]

**monaco-editor version:0.21.2
**Browser:Chrome
**OS:Macos
Playground code that reproduces the issue:
**Typescript version 4.0.2

TypeScript compiler gives an error node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js: unknown Expression of type "ClassExpression" When I install versions 0.21.2 and 0.21.1 but version 0.2.0 works fine.

[mike-lischke]

That's a funny accident. After searching days for a solution, posting a StackOverflow question and preparing a github repo for demonstration somebody else just reported the issue, when I was about to do the same :-D

However, the test repo is certainly still usable. @alexdima please use this repo: https://github.com/mike-lischke/babel-test. Run npm install in the root, then npm run build and after a while the build will stop with:

./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js
Error: /babel-test/node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js: unknown Expression of type "ClassExpression"
at Array.forEach ()

Now change 2 entries in package.json:

"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.1",

and run the same two steps again. The build will now succeed.

[mike-lischke]

@cenkce btw. I don't think this is a Typescript error but rather comes from Babel. I found a similar problem and also saw the fixed part of the error message in the Babel runtime. And typescript would also print a line number for the problem.

[cenkce]

So that the problem is babel version in react-scripts? @mike-lischke

[mike-lischke]

Difficult to say. I tried to install newer versions for some libs (see the StackOverflow thread), but that didn't help.

My assumption is that monaco-editor uses syntax that Babel (or CRA) cannot handle. But this has to be confirmed yet and we probably need a fix in monaco-editor, since Babel as part of CRA cannot be fixed easily (I'd like to avoid ejecting the CRA app).

[cxcorp]

Hey. I participated in the SO thread mentioned by @mike-lischke.

I debugged the sample project and got the longer error message out:

'ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /home/user/babel-test/node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js: unknown Expression of type "ClassExpression"
    at Emitter.Ep.explodeExpression (/home/user/babel-test/node_modules/regenerator-transform/lib/emit.js:957:13)
    at explodeViaTempVar (/home/user/babel-test/node_modules/regenerator-transform/lib/emit.js:742:23)
    at Emitter.Ep.explodeExpression (/home/user/babel-test/node_modules/regenerator-transform/lib/util.js:28:17)
    at /home/user/babel-test/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/user/babel-test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/user/babel-test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/user/babel-test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/user/babel-test/node_modules/babel-loader/lib/index.js:59:103'

So the error comes from wordDistance.js. This file is from monaco-editor-core (which is built from VSCode I believe?). I decided to compare the file between v0.20.0 and v0.21.2. Looking at the file in v0.21.2, it looks like the @babel/plugin-transform-async-to-generator transformation (or something like it?) has been run to change async/await to generators. I am not sure if this has happened when building monaco-editor-core, or monaco-editor.

node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js@v0.21.2:

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
// <snip for brevity>
export class WordDistance {
    static create(service, editor) {
        return __awaiter(this, void 0, void 0, function* () {
            //                                ^^^^^^^^^
            //                                transformed async -> generator
            // <snip>

            const [ranges] = yield new BracketSelectionRangeProvider().provideSelectionRanges(model, [position]);
            //               ^^^^^ transformed await -> yield
            //
            // <snip>
            return new class extends WordDistance {
                   /// ^^^^^^^^^^^^^^^^^^^^^^^^^^
                   // ClassExpression - explodes

When this module gets eventually imported when compiling @mike-lischke's sample project, Babel tries to apply @babel/plugin-transform-regenerator (from @babel/preset-env which CRA uses) to transform this generator to use the regenerator runtime instead. It uses regenerator-transform for this. This transform then, presumably, goes through the AST of the generator inside WordDistance.create, until it reaches return new class extends WordDistance {}, or more specifically, class extends WordDistance, which is an expression of (babel AST) type ClassExpression. Looking at the source code of regenerator-transform, there's no handling for this, and it throws an error.

However, in v0.20.0, some sort of an equivalent transform has already been done, so there are no generators in the distribution. I'm not sure if this is the output of @babel/plugin-regenerator-transform. The important part is that there's no generators here, and it appears like the new class extends WordDistance expression has been transformed into new /** @class */ (function (_super) {...})(WordDistance):

node_modules/monaco-editor/esm/vs/editor/contrib/suggest/wordDistance.js@v0.20.0:

var __extends = (this && this.__extends) || (function () {
    // <snip>
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    // <snip>
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    // <snip>
};
// <snip>
var WordDistance = /** @class */ (function () {
    function WordDistance() {
    }
    WordDistance.create = function (service, editor) {
        return __awaiter(this, void 0, void 0, function () {
            var model, position, ranges, wordRanges;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        if (!editor.getOption(89 /* suggest */).localityBonus) {
                            return [2 /*return*/, WordDistance.None];
                        }
                        if (!editor.hasModel()) {
                            return [2 /*return*/, WordDistance.None];
                        }
                        model = editor.getModel();
                        position = editor.getPosition();
                        if (!service.canComputeWordRanges(model.uri)) {
                            return [2 /*return*/, WordDistance.None];
                        }
                        return [4 /*yield*/, new BracketSelectionRangeProvider().provideSelectionRanges(model, [position])];
                    case 1:
                        ranges = _a.sent();
                        if (!ranges || ranges.length === 0 || ranges[0].length === 0) {
                            return [2 /*return*/, WordDistance.None];
                        }
                        return [4 /*yield*/, service.computeWordRanges(model.uri, ranges[0][0].range)];
                    case 2:
                        wordRanges = _a.sent();
                        return [2 /*return*/, new /** @class */ (function (_super) {
                            //     ------------------^^^^^^^^^^^^^^^^^^^^^^^ 
                            //     transformed class expression
                            //

So in summary, there appears to have been a compilation target change in either monaco-editor or monaco-editor-core (or as an extension, possibly VS Code?) between v0.20.0 and v0.21.2. As a result, in v0.21.2, there's a class expression inside a generator, which explodes regenerator-runtime which comes from @babel/plugin-transform-regenerator which comes from @babel/preset-env which comes from Create React App's defaults.

I'm not quite sure where the cause is here. Is this about some missing Babel plugin or plugin bug or plugin/target misconfiguration in CRA or @babel/preset-env? A missing class expression transformation? Should monaco-editor's distribution be compiled against such a compilation target that its sources should be compilable when using @babel/preset-env?

[mike-lischke]

That's an excellent analysis, many thanks @cxcorp! What I don't understand is that I use the new monaco-editor version already since Sep 29 and only recently found the issue when I completely erased my node_modules folder and did a full install. However, that's not the point to discuss here.

I also tried to set esnext and es2020 as targets for my TS(X) files, but that resulted in a different (but equally strange) error:

./src/components/ui/CodeEditor/CodeEditor.tsx
Line 0: Parsing error: Cannot read property 'map' of undefined

Note the line 0 output. However, since the error output of Babel is so sparse, I have a hard time to identify the true reason for errors like that. Is there a setting to make Babel spit out more info in case of errors?

[cxcorp]

I'm not quite sure. I placed a breakpoint on node_modules/webpack/lib/NormalModule.js:323 which is inside the doBuild function's runLoaders callback's if (err) block, launched react-app-rewired start in VS Code's debugger [1], and then looked at error.stack in the debugger when the breakpoint hit. Although it could be that this new error doesn't occur in the same place, so you might need to find some error handler of a higher level function in webpack or Babel to breakpoint.

[1] Here's my .vscode/launch.json if you're using VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/.bin/react-app-rewired",
      "args": ["start", "--no-cache"],
      "runtimeArgs": ["--max-old-space-size=8192"],
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "env": {
        "HTTPS": "false"
      }
    }
  ]
}

A side note, I noticed that the project compiles if you disable the suggest feature in config-overrides.js:

diff --git a/config-overrides.js b/config-overrides.js
index 679e10c..4bd7516 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -26,7 +26,8 @@ const path = require("path");
 
 module.exports = function override(config, env) {
     config.plugins.push(new MonacoWebpackPlugin({
-        languages: ["typescript", "javascript", "mysql", "json", "markdown", "ini", "xml"]
+        languages: ["typescript", "javascript", "mysql", "json", "markdown", "ini", "xml"],
+        features: ['!suggest']
     }));
 
     config.module.rules.push(

If I had to guess, this probably disables autocomplete/code suggestions, but I didn't test if further.

Since the newer version worked previously, any chance you have the package.json and more importantly package-lock.json from that time in source control?

[cenkce]

I'm pretty sure that the problem is babel version of the react-scripts. And it doesn't support Typescript 4.x yet. I upgraded react-scripts to 3.4.3 but it didn't support too. Btw react-scripts versions between 3.4.1 and 3.4.3 have a bug therefore it also doesn't work with Lerna.

[mike-lischke]

Indeed, the changelog of create-react-app shows that the latest supported TS version is 3.8.

@alexdima Can you please re-release monaco-editor after you changed the code to use at most TS 3.8? Many thanks.

[JoshClose]

create-react-app 4.0.0 has been released and supports typescript 4. I still have to downgrade to monoco-editor 0.20.0 for it to build.