karolis-sh / electron-snowpack

Use Snowpack and esbuild for Electron app development
MIT License
50 stars 8 forks source link

How to get monaco-editor working? #26

Closed MrGreenTea closed 3 years ago

MrGreenTea commented 3 years ago

We are currently evaluating snowpack and I am very grateful for your work on this integration. We use monaco-editor in our app and using @monaco-editor/react for this works quite well. The only issue I am facing is that by default that package loads monaco sources from a CDN. We need to provide them ourselves and for that we have to include monaco-editor/min/vs directly or at least all scripts that are used from there (editor.worker.js, etc and one for every language). What do I have to do to achieve this? I have tried using snowpack-plugin-copy but haven't yet found the place to copy these sources to. I also tried using mount in snowpack.config.js like this:

module.exports = {
  mount: {
    'node_modules/monaco-editor/min/vs': {static: true, resolve:false, url: '/monaco-editor'},
  },
}

and then use loader like this:

import { loader } from "@monaco-editor/react";

loader.config(
    {
       paths: {
         vs: "/monaco-editor"
       }
     }
 )

This kind of works but I get these errors:

[snowpack] [404] /min-maps/vs/loader.js.map
  ✘react-typescript-snowpack/public/min-maps/vs/loader.js
[snowpack] [404] /min-maps/vs/editor/editor.main.js.map
  ✘ react-typescript-snowpack/public/min-maps/vs/editor/editor.main.js
[snowpack] [404] /min-maps/vs/editor/editor.main.nls.js.map
  ✘ react-typescript-snowpack/public/min-maps/vs/editor/editor.main.nls.js
[snowpack] [404] /min-maps/vs/base/worker/workerMain.js.map
  ✘ react-typescript-snowpack/public/min-maps/vs/base/worker/workerMain.js

I would really appreciate any help you can provide.

MrGreenTea commented 3 years ago

Ignoring those 404 for source maps it also does not work on production builds (with yarn run dist as in the react-typescript example). How to bundle the files monaco-editor needs?

karolis-sh commented 3 years ago

Hey there,

As this package focuses on the integration between Electron and snowpack I suggest first trying to run your use-case via snowpack and then debugging if there are any further issues with the Electron environment. Here's an https://github.com/microsoft/monaco-editor/issues/2227 issue that seems to discuss your issue, maybe that will help.

MrGreenTea commented 3 years ago

Hi sorry you're right. At first I was just wondering how to distribute files with this configuration and electron-builder. Thanks for the link to the monaco-editor issue, I'll try that one again :)