search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.46k stars 3.6k forks source link

ESM compile error #2334

Closed sbuchok closed 3 years ago

sbuchok commented 3 years ago

monaco-editor version: 0.22.3 Browser: N/A OS: Windows

I included all the files (all files in dev, esm, min and min-maps) into a project. I try to compile my project and I get errors.

Error Build:Cannot find module 'monaco-editor-core' or its corresponding type declarations. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\css\fillers\monaco-editor-core.d.ts 1
Error Build:Cannot find module 'monaco-editor-core' or its corresponding type declarations. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\html\fillers\monaco-editor-core.d.ts 1
Error Build:Cannot find module 'monaco-editor-core' or its corresponding type declarations. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\json\fillers\monaco-editor-core.d.ts 1
Error Build:Cannot find module 'monaco-editor-core' or its corresponding type declarations. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\typescript\fillers\monaco-editor-core.d.ts 1
Error Build:Cannot redeclare block-scoped variable 'MonacoEnvironment'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\editor\editor.api.d.ts 12
Error Build:Cannot redeclare block-scoped variable 'MonacoEnvironment'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\monaco.d.ts 11
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'IDisposable'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\typescript\monaco.contribution.d.ts 1
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'IEvent'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\css\monaco.contribution.d.ts 1
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'IEvent'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\html\monaco.contribution.d.ts 1
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'IEvent'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\json\monaco.contribution.d.ts 1
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'IEvent'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\typescript\monaco.contribution.d.ts 1
Error Build:Module '"./fillers/monaco-editor-core"' has no exported member 'Uri'. Interface C:\TFS\TeamBudget\Development-UI\Interface\ClientScripts\ThirdParty\monaco\vs\esm\vs\language\typescript\monaco.contribution.d.ts 1

There are no good examples on your site or within GitHub for using just the ESM version.

alexdima commented 3 years ago

I included all the files (all files in dev, esm, min and min-maps) into a project

This does not make sense.

There are many samples at https://github.com/microsoft/monaco-editor-samples

sbuchok commented 3 years ago

Wait, so because you don't understand why there is a compiler error in your code, you're just closing the ticket?

I have a pre-existing project. It does not use TS, WebPack, nothing. Just Vanilla JS. I add all the folders and files from the zip file. I compile the application and I get the above errors. This is not my code. Either your documentation needs to be improved, your examples need to be improved or your code needs to be improved.

Currently, your examples do not show the file structure. They do not explain what Parcel is.

https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-parcel/src/index.js

This is the example I am going by. Where is the file structure for all the monaco files in this example? Instead of closing the ticket right away, feel free to ask more questions.

alexdima commented 3 years ago

The README explains what each folder contains, so while the documentation is definitely lacking, the information regarding what each folder contains is present immediately under the screenshot: https://github.com/microsoft/monaco-editor#installing

image

There are complete self-contained samples for how to integrate the editor. There are samples for how to integrate it in a browser, in Electron or node webkit. There are two main options, using the pre-bundled AMD form or using an ESM bundler (examples are offered for webpack or parcel).

As a maintainer of this project, I cannot offer individual consultation to you on how to integrate the editor. You need to understand the techniques used in those samples and apply those techniques to your project.

sbuchok commented 3 years ago

I should be able to put the files and folders in ESM folder anywhere and be able to compile. I can not compile. This is why I'm trying to ask the community. I see this as a bug. How is this ok to have?

sbuchok commented 3 years ago

BTW, thanks as I do like Monaco. I've used the version that requires AMD. I have had that working for about 3 years. Now we are changing towards a more vanilla JS approach. So, I'm not new to Monaco. I'm new to loading it using vanilla JS. But again, I should not be getting compiler errors if I have included everything in the ESM folder into my solution. Whether monaco loads or not is not my concern right now as I can't even compile the solution.

alexdima commented 3 years ago

See https://github.com/microsoft/monaco-editor/issues/886

sbuchok commented 3 years ago

Looks like ESM is not ready to be used.

I had to comment out line 11 in monaco.d.ts just like what was said in this thread: https://github.com/microsoft/monaco-editor/issues/2219

Then I had to go to a number of monaco.contribution.d.ts files and point them from './fillers/monaco-editor-core' to '../../edit/editor.api' (specifically the ones in vs/language/css, html, json and typescript)

Now that it compiles, I get an error about CSS mime types as described here: https://github.com/microsoft/monaco-editor/issues/886

sbuchok commented 3 years ago

lol, you posted that just before I was done typing

sbuchok commented 3 years ago

At this point, I think I need to go back to using the AMD version as the ESM version seems to have dependencies with WebPack or something like that. It would be nice if there was a build that you could just have the files and folders, put them somewhere, run the app and use native ES modules and import