CODEWITHSUNDEEP
javascripthtmlsveltekitmedium-editor
Pavindu
Pavindu

Reputation: 3113

ReferenceError: Document is not defined when trying to use medium-editor in svelte app

I'm trying to use the medium-editor in my Svelte application as follows.

<script lang="ts">
  import { onMount } from 'svelte';
  import 'medium-editor/dist/css/medium-editor.min.css';
  import 'medium-editor/dist/css/themes/default.min.css';
  import MediumEditor from 'medium-editor';

  let editor;

  onMount(() => {
    editor = new MediumEditor('#editable', {
      // medium-editor options can be added here
    });
  });

</script>

<div class="app">
    <div id="editable" contenteditable="true">
        <!-- Your initial content goes here -->
      </div>
</div>

<style>
    
</style>

However, when running the application, I'm getting the following error, despite onMount function has been used.

ReferenceError: document is not defined at Object. (/Users/pavindu/Projects/chronicle/app/node_modules/medium-editor/dist/js/medium-editor.js:6:22) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at ModuleWrap. (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Upvotes: 0

Views: 383

Answers (1)

Trevor V
Trevor V

Reputation: 2141

You can use a code to determine if you are in the browser

import { browser } from '$app/environment';

onMount(() => {
  if (browser) {
    editor = new MediumEditor('#editable', {
      // medium-editor options can be added here
    });
  }

or a better way would be per the sveltekit docs you can import in the onMount method

import { onMount } from 'svelte';

onMount(async () => {
    let editor = await import('medium-editor');
    editor = new MediumEditor('#editable', {
      // medium-editor options can be added here
    });
});

Take a look at the SvelteKit FAQ How do I use a client-side only library that depends on document or window?

Upvotes: 0

Related Questions