TypeFox / monaco-languageclient

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples
https://www.npmjs.com/package/monaco-languageclient
MIT License
1.07k stars 180 forks source link

How can I use monaco in my electron app? #322

Closed MassMessage closed 2 years ago

MassMessage commented 2 years ago

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.

CGNonofr commented 2 years ago

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.

MassMessage commented 2 years ago

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

kaisalmen commented 2 years ago

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

MassMessage commented 2 years ago

@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

kaisalmen commented 2 years ago

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