Using monaco-editor with typescript without webpack in an electron project - node.js

Question

I'm trying to use monaco-editor in an electron typescript project. I installed it via
npm install -D monaco-editor.
I import it with import { editor } from "monaco-editor"; My IDE (WebStorm) doesn't complain about an unfound module, however after running the app I get the following error:
Uncaught Error: Cannot find module 'monaco-editor' from internal/modules/cjs/loader.js:801 in the console.
I have already tried
Downloading the package manualy
Reinstalling the module
Cloning the code from the official repository
I was able to run official samples, those however use pure javascript. I also do not use WebPack. I suppose that should not make a difference, however it is used in all getting started and installation guides.
What is the source of that error and how can I fix it?
P.S. You can find the full code on github if you need more context

Answer 1

I managed to make it work.
So for those who try:
tsconfig.json
Try to make the typescript compiler ignore the errors in the monaco library.
"compilerOptions": {
"checkJs": false,
"skipLibCheck": true,
},
rollup.config.js
Make the bundler accept importing css files, also adding the line inlineDynamicImports: true fix the compile. I am not sure what the impact is yet.
import rollupPluginCssOnly from 'rollup-plugin-css-only'
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
inlineDynamicImports: true
},
plugins: [
rollupPluginCssOnly({
output: 'public/build/extra.css'
}),
html page
I use svelte but this can be converted to plain html easily (using for example getDocumentById to get the element).
<script lang="ts">
import { onMount } from 'svelte'
import './extra.css'
import * as monaco from 'monaco-editor'
var containerElt: HtmlDivElement
onMount(() => {
monaco.editor.create(containerElt, {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n',
),
language: 'javascript',
})
})
</script>
<style>
div {
width: 100%;
height: 100%;
}
</style>
<svelte:head />
<div bind:this={containerElt} />