require() function error under svelte kit

[stillday]

i use the svelte kit, and i install the solution over npm. after the start from my svelte, i get an error message: `Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\svelte-quill\dist\index.cjs.js require() of ES modules is not supported. require() of C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\svelte-quill\dist\index.cjs.js from C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.cjs.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\svelte-quill\package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:68236:17)
at ssrImport (C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:68189:20)
at eval (/src/lib/components/Translater.svelte:9:31)
at instantiateModule (C:\project\private\foundryvtt-dnd5e-lang-de\interface\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:68222:166)`

[rotimi-best]

Exactly I have the same issue right now

[damevin]

👋. I have the same problem

[algj]

Same issue

[alexruimy]

same issue

[algj]

I somehow solved this issue, but forgot how.

I think it was related to outdated svelte library, so make sure to add @next, like yarn add svelte@next @sveltejs/adapter-static@next.

[cycle4passion]

Again an issue for sveltekit.

npm init svelte@next
 -> demo chosen
 -> typescript chosen
 -> eslint chosen
 -> prettier chosen.
npm install
npm install svelte-quill

exports is not defined in ES module scope

drop in code (from REPL)
```js
<script>
    import { quill } from 'svelte-quill'
    let options = { placeholder: "Write something from outside...", }
    let content = { html: '', text: ''};
</script>

<svelte:head>
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</svelte:head>

<main>
  <h1>SVELTE-QUILL</h1>
  <div class="editor" use:quill={options} on:text-change={e => content = e.detail}/>
    <br />
    Resulting HTML:

    {@html content.html}
</main>

ERROR:

This file is being treated as an ES module because it has a '.js' file extension and '/Users/myusername/Documents/Shared/Coding/Svelte/encounter-2022/node_modules/svelte-quill/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

I did find this information which I think might be relevant, but not sure how to implement. Typescript Issue 42151

[ExcelDurant]

Same issue

[az1611]

Had similar issue and i was advised to move to tiptap, since quill is not maintained and has known XSS vuln issues. Since i couldnt move immediately i've resolved with the following code:

onMount(async () => {
      if (browser) {
          const editorDiv = document.getElementById("editor")
          let {quill} =await import ("svelte-quill");
          quillInstance = quill(editorDiv, quillOptions)
    }})

and somewhere in the html <div id="editor" on:text-change={receivedText}/>

[paoloricciuti]

``I had the same problem, the solution i resorted to is to disable ssr for the route the uses the module.

Here's the pr (in svelte) that introduces the change to handle() to better disable ssr selectively https://github.com/sveltejs/kit/pull/2804/files

And here's the documentation of svelte that explains how to do it.

https://kit.svelte.dev/docs/hooks#handle

And here's how i've implemented it

//src/handle.ts
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    let ssr = true;
    //this is a regex for the route i was using svelte-quill in but it can be easily
    //adapted with a list of regex for every route
    if (/.*?admin\/canti\/?\d*/.test(event.request.url)) {
        ssr = false;
    }
    const response = await resolve(event, {
        ssr,
    });
    return response;
}