vue3-ace-editor: ReferenceError: window is not defined when using with Nuxt

Hoping to use this with a Vue3 app running on Nuxt 3. But i can’t find a way to use this as it references window as soon as it’s imported.

ReferenceError: window is not defined
    at /nuxt3-app/node_modules/ace-builds/src-noconflict/ace.js:21534:21
    at _require (/nuxt3-app/node_modules/ace-builds/src-noconflict/ace.js:88:37)

Do you know if there is a way that we can wrap this or include it only after the mounted lifecycle hook?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

Check the code here: https://github.com/CarterLi/nuxt-ace

CarterLi on Sep 6, 2022

Okey, found a dirty solution

// ace-editor.ts

import 'ace-builds/src-noconflict/ace';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import { VAceEditor } from 'vue3-ace-editor';

export default VAceEditor;

<script lang="ts" setup>
// app.vue

import { defineAsyncComponent, h } from 'vue'
const VAceEditor = defineAsyncComponent(() => {
  if (typeof window !== 'undefined') {
    return import('./ace-editor');
  } else {
    return Promise.resolve(defineComponent({
      inheritAttrs: false,
      props: { value: String },
      render() { return h('div', { style: this.$attrs.style, class: this.$attrs.class }, this.value) },
    }) as unknown as typeof import('./ace-editor'));
  }
});
</script>
<template>
  <VAceEditor lang="json" value="{ hello: 'world' }" readonly style="height: 300px" />
</template>

Also implementation of react-ace: https://github.com/securingsincity/react-ace/pull/841/files

CarterLi on Sep 6, 2022

const VAceEditor = defineAsyncComponent(() => import(‘vue3-ace-editor’).then(x => x.VAceEditor)

CarterLi on Sep 6, 2022

Should be defineAsyncComponent

CarterLi on Sep 6, 2022