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
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?
PS You can find the full code on github if you need more context
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} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.