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

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} />