Error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'

[bsivanov]

When importing the MonacoEditorModule in AppModule in a CLI-generated Angular 10 application, I get the following error:

ERROR in 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.

Here the monaco team mention that probably what's happening is that I am trying to simultaneously import ESM and AMD module, but it seems I'm doing nothing special, just:

// app.module.ts
import { MonacoEditorModule } from 'ng-monaco-editor/public-api';
//...
  imports: [
    BrowserModule,
    AppRoutingModule,
    MonacoEditorModule
  ],

I tried the different approaches with dynamic-import and baseUrl but to no avail. Am I missing something obvious? I will happily update the README if this is the case.

[JounQin]

Please provide a runnable reproduction, thx.

[bsivanov]

Make sense. It seems this is reported two more times, but the issues are closed: #44 and #49.

Here is a minimal repo: https://github.com/bsivanov/ng-test/. It's the default CLI-generated project + one commit for adding the ng-monaco-editor and importing the module in AppModule.

The error appears when I execute npm run build.

[JounQin]

Thank you, I'll take a look when I'm free, maybe tomorrow.

[fengtianze]

@bsivanov please update v3.0.3 and use import { MonacoEditorModule } from 'ng-monaco-editor'; instead of import { MonacoEditorModule } from 'ng-monaco-editor/public-api';