"Identifier 'global' has already been declared at compileFunction" error In jest tests after upgrading to monaco-editor 0.21.0

Viewed 920

I upgraded my react project to use monaco-editor version 0.21.0, since then the jest tests for files where monaco-editor is being imported have started to fail with the following error:

ā— Test suite failed to run

/Users/omerharoon/Documents/code/packages/webapp/node_modules/monaco-editor/esm/vs/editor/editor.api.js:20
const global = self; // Set defaults for standalone editor
      ^

SyntaxError: Identifier 'global' has already been declared
    at compileFunction (<anonymous>)

  2 | 
  3 | import React from 'react';
> 4 | import * as monaco from 'monaco-editor';
    | ^
  5 | import { Resizable } from 're-resizable';
  6 | import {
  7 |   getLanguageFromFilename,

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)
  at Object.<anonymous> (src/components/helpers/MonacoEditor/index.tsx:4:1)
  at Object.<anonymous> (src/components/helpers/MonacoEditor/monaco_colorization.spec.tsx:6:1)

This started occurring right after the upgrade, the old version was 0.19.3 and all the tests worked fine on that version. monaco-editor-webpack-plugin was also upgraded from 1.9.0 to 2.0.0

We're importing monaco directly from

node_modules/monaco-editor/esm/vs/editor/editor.api

in order to overcome lazy loading issues.

Jest Config:

"jest": {
"modulePaths": [
  "<rootDir>/src"
],
"collectCoverageFrom": [
  "**/*.{js,jsx,ts,tsx}",
  "!**/*.d.ts",
  "!**/node_modules/**",
  "!**/public/**",
  "!**/next.config.js",
  "!**/server.js"
],
"setupFilesAfterEnv": [
  "<rootDir>/setupTests.js"
],
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/.next/",
  "<rootDir>/public/",
  "<rootDir>/config/",
  "<rootDir>/next.config.js",
  "<rootDir>/server.js",
  "<rootDir>/build/"
],
"transform": {
  "^.+\\.[jt]sx?$": "babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js"
},
"transformIgnorePatterns": [
  "/node_modules/(?!monaco-editor)/",
  "^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
  "^monaco-editor$": "monaco-editor/esm/vs/editor/editor.api",
  "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"coverageReporters": [
  "text",
  [
    "lcov",
    {
      "projectRoot": "../../"
    }
  ]
]},
1 Answers

Upgrading to monaco-editor 0.23.0resolved the problem for me.

Related