Cannot redeclare block-scoped variable 'MonacoEnvironment'

Question

I have developed a private library, @labcorp/ngx-monaco-editor.

The library builds and its test project runs fine and we have successfully integrated it into several projects, however one project errors with:

Error: node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

12     let MonacoEnvironment: Environment | undefined;
           ~~~~~~~~~~~~~~~~~

  node_modules/monaco-editor/monaco.d.ts:11:13
    11 declare let MonacoEnvironment: monaco.Environment | undefined;
                   ~~~~~~~~~~~~~~~~~
    'MonacoEnvironment' was also declared here.


Error: node_modules/monaco-editor/monaco.d.ts:11:13 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

11 declare let MonacoEnvironment: monaco.Environment | undefined;
               ~~~~~~~~~~~~~~~~~

  node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9
    12     let MonacoEnvironment: Environment | undefined;
               ~~~~~~~~~~~~~~~~~
    'MonacoEnvironment' was also declared here.

I have closely examined our tsconfig files and despite all changes, I can't seem to find what's causing this.

If I create a new Angular 14 project using the CLI, the library also works as expected, so the error has to be something project-specific.

What can I do to resolve this error correctly?

The only solution I've found so far is to manually comment out line 11 of monaco.d.ts:

declare let MonacoEnvironment: monaco.Environment | undefined;

Answer 1

To work around this, I wrote a postinstall script to comment out the global declaration in the monaco-editor/esm/vs/editor/editor.api.d.ts file.

The project will compile and run as expected, and I haven't seen any side effects as of yet.

const fs = require('fs');
const path = require('path');
const readline = require('readline');
const filePath = path.join(process.cwd(), 'node_modules', 'monaco-editor', 'esm', 'vs', 'editor', 'editor.api.d.ts');

console.log('filePath', filePath);

// // create a readable stream
const readStream = fs.createReadStream(filePath);

// create a writable stream
const writeStream = fs.createWriteStream(filePath, { flags: 'r+' });

// create an interface for reading the file line by line
const rl = readline.createInterface({
  input: readStream,
  output: writeStream,
  terminal: false
});

// read each line of the file
rl.on('line', (line) => {

  // check if the line contains the code you want to comment out
  if (line.includes('let MonacoEnvironment: Environment | undefined;')) {
    line = `// ${ line }`;
  }
  // write the modified line to the file
  writeStream.write(`${ line }\n`);
});

// close the streams when done
rl.on('close', () => {
  readStream.close();
  writeStream.close();
});

Hope this will help someone out until a better fix is available.