Chrome Browser Experiencing Freezes and Crashes

[underthesand]

Hello,

I've encountered multiple instances of freezing with this module, specifically when refreshing the browser multiple times. This occurs in both clean sessions and private navigation modes.

Environment:

• Chrome Version: 116.0.5845.96 (Official Build) (64-bit)
• Ubuntu 23.04

Here are the steps to reproduce the issue and relevant configuration files:

Installation and Initialization:

npx nuxi@latest init frontend
yarn install
yarn add -D monaco-editor nuxt-monaco-editor
yarn dev

App.vue File:

<template>
    <MonacoEditor v-model="value" lang="typescript" style="height: 80vh" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

package.json File:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "monaco-editor": "^0.41.0",
    "nuxt": "^3.6.5",
    "nuxt-monaco-editor": "^1.2.3"
  }
}

I've tested the module with Firefox and it works fine there. Additionally, when tested with Chrome and Express, no issues were encountered.

Express Configuration:

{
  "dependencies": {
    "express": "^4.18.2",
    "monaco-editor": "^0.41.0"
  },
  "name": "monaco-node",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Best regards,

[mentalrob]

I'm experiencing same issue with different setup

<template>
  <div class="me-container" style="height: 350px">
    <MonacoEditor
      style="height: 350px"
      ref="editor"
      :options="{
        theme: 'hc-black',
        automaticLayout: true,
      }"
      lang="sol"
      v-if="sourceCode"
      v-model="sourceCode"
    />
  </div>
  <button @click='searchText("Hello")' />
</template>

<script setup>
 const editor = ref();
 const sourceCode = ref("Hello world")
 function searchText(text) {
     editor.value.getModel().findAllMatches(text); // Freezes.
 }
</script>

[andrei0465]

Possible fix, maybe it will help someone. Using <ClientOnly> on template or using useMonaco and onMounted.

<ClientOnly>
  <MonacoEditor :options="{ theme: 'vs-dark' }" />
</ClientOnly>

const monaco = useMonaco()!;
const editorEl = ref<HTMLDivElement>();

onMounted(() => {
    if (editorEl.value) {
        const editor = monaco.editor.create(editorEl.value, {
            theme: "vs-dark",
            language: "shell",
            automaticLayout: true,
        });

        // You can configure the editor or add event listeners here.
    }
});

[rubennaatje]

For me the issue is already when i enable the module. Don't even need to add the component anywhere.

[andrei0465]

For me the issue is already when i enable the module. Don't even need to add the component anywhere.

Try to put the module first in the list, even though it sounds silly, it might help.

[Sun-ZhenXing]

I think it has something to do with the internal mechanism of monaco-editor.

Anyway don't do anything on ref(editor), use toRaw() to receive the ref, or use shallowRef().

Vue 3's circular references will cause the browser to crash.

[anbraten]

Having the same issue. My tab is even freezing when just adding the module (not even using useMonaco, one of the components) recently.