angularmonaco-editorangular14

Cannot redeclare block-scoped variable 'MonacoEnvironment'


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;

Solution

  • 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.