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