monaco-languageclient icon indicating copy to clipboard operation
monaco-languageclient copied to clipboard

How can I use monaco in my electron app?

Open MassMessage opened this issue 2 years ago • 2 comments

How can I use monaco in my electron app?

I mean the code sample from https://github.com/TypeFox/monaco-languageclient/tree/master/example What's the proper way to do that? i'm open to new suggestions. I throughout into building a micro frontends but it's not that nice in react/electron and in the end i would have to include the final index output file using iframe. I wish I could use something we do with dlls in desktop application. note: i'm new to react and electron, perdon mystakes that seems so simple.

Well, I tried to "merge" as needed both webpack configs. Is this the way to go? so far i couldn't make it. I added:

  resolve: {
    alias: {
      'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
    }

but it cannot find the vscode module, i'm getting the error:

Module not found: Can't resolve 'vscode' in 'C:\Users\jjj\Desktop\merge\Newton\node_modules\vscode-languageclient\lib\common' even tho the package is installed.

I also tried to add "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js' in the entry section but I got the error:


An unhandled error has occurred inside Forge:
Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915)
Error: Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915)

I did plan to -- assuming it's the proper way to go ---, once managed to fix this webpackes merge, I'd include the main file with the contents:

    require('monaco-editor');
    (self as any).MonacoEnvironment = {
        getWorkerUrl: () => './editor.worker.bundle.js'
    }
    require('./client');

then have <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> somewhere to show the editor and the <script src="main.bundle.js"></script> wouldn't be needed due to the fact it would be included in the webscript's output javascript bundle file, used elsewhere by the entire application.

MassMessage avatar Mar 06 '22 17:03 MassMessage

I'm not used to electron, sorry

Multiple chunks emit assets to the same filename

It happens if you make the webpack config output 2 different bundles as the same file, it's probably related to the output.filename/output.chunkFilename configurations.

CGNonofr avatar Mar 08 '22 09:03 CGNonofr

I'm not used to electron, sorry

Multiple chunks emit assets to the same filename

It happens if you make the webpack config output 2 different bundles as the same file, it's probably related to the output.filename/output.chunkFilename configurations.

I've fixed that but still get the vscode not found error

MassMessage avatar Mar 18 '22 03:03 MassMessage

@MassMessage does this problem still persist with newer versions of monaco-languageclient?

kaisalmen avatar Oct 19 '22 06:10 kaisalmen

@MassMessage does this problem still persist with newer versions of monaco-languageclient?

I'm sorry, I haven't tested newer versions... At time I found out the issue was related to the webpack I was using, I did switch to eletron forget's and the issue was gone

MassMessage avatar Nov 29 '22 17:11 MassMessage

@MassMessage thanks for the update. I will close this now. If you run into new problems, please open a new issue.

kaisalmen avatar Nov 29 '22 20:11 kaisalmen