Cant get this working in Svelte Kit #96

MarcGodard · 2021-06-27T18:45:50Z

Hi I can't seem to get this working in Svelte Kit.

Like all my other modules:

[vite] Error when evaluating SSR module /node_modules/remark-parse/index.js?v=94403ef9:
ReferenceError: module is not defined
    at /node_modules/remark-parse/index.js?v=94403ef9:3:1
    at instantiateModule (/Users/marcgodard/Documents/Github/swp-crm/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69982:166)

And If I turn SSR off I get:

[vite] Internal server error: Cannot find module './transformers/module'

Has anyone gotten this working yet?

The text was updated successfully, but these errors were encountered:

muellercornelius · 2021-07-14T20:03:51Z

Yep I have the same problem ;(

VirgileD · 2021-08-25T08:02:55Z

Yep, same here

module is not defined

ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=5d239c0d:373:1
    at instantiateModule (/home/virgiled/Projects/lookout-radar/wl-vision-1/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:73464:166)

CaptainCodeman · 2021-08-27T18:02:45Z

It's very frustrating - this looks like a fantastic editor, and it's written using Svelte - but trying to consume it directly from SvelteKit seems to be impossible.

Even more frustrating is if you drop the source directly into the "lib" folder of a brand new SvelteKit project it all just works. Using the "package" feature of SvelteKit then makes a version that can be imported into other SvelteKit projects, so maybe using this as a packaging option would be an idea?

benwoodward · 2021-09-04T03:42:14Z

Would also love to see this issue resolved, just upgraded my project to SvelteKit and now it seems like my editor doesn't work.

axmad386 · 2021-09-11T04:20:36Z

Hi, I encounter the same problem here. I think I know what the source of the problem. Svelte Kit currently work on ESM. So importing cjs module with default import will break the svelte-kit
for example
import debounce from "lodash.debounce" will break
but import * as debounce from "lodash.debounce" is OK.
I try to modif the util.js and refactor the import way, but I ended up with this

import ghSchema from 'hast-util-saniretize/lib/github.json';
I don't understand what is hast-util-saniretize, I cannot find it in npm

benwoodward · 2021-09-11T04:25:19Z

import ghSchema from 'hast-util-saniretize/lib/github.json';
I don't understand what is hast-util-saniretize, I cannot find it in npm

You have a typo. This is what you're looking for:

https://github.com/syntax-tree/hast-util-sanitize/blob/4dd66cc8ae4066f58627359f6c53b45abdadfebe/lib/github.json

You need to install hast-util-sanitize v3.0.2

axmad386 · 2021-09-11T04:35:11Z

Oh I make a mistake, I suddenly edited the import string. OK I'll try again
Thanks @benwoodward

axmad386 · 2021-09-11T04:55:42Z

Now stuck on this

The requested module '/node_modules/.pnpm/unist-util-visit@2.0.3/node_modules/unist-util-visit/index.js?v=421b96cf' does not provide an export named 'default'

Don't know where this module is imported, maybe I miss something.
Waiting for the maintainer to resolve this Issue 😞

benwoodward · 2021-09-11T05:03:09Z

Yeah, I had to upgrade it to "^4.0.0" to get rid of that error. Most, if not all of the syntax-tree plugins need to be upgraded to their latest versions to work with Sveltekit—this is due to the fact that Vite only works with ESM modules and syntax-tree converted all their plugins to ESM modules only in recent versions.

axmad386 · 2021-09-11T06:53:29Z

Yeah, I had to upgrade it to "^4.0.0" to get rid of that error. Most, if not all of the syntax-tree plugins need to be upgraded to their latest versions to work with Sveltekit—this is due to the fact that Vite only works with ESM modules and syntax-tree converted all their plugins to ESM modules only in recent versions.

Which module you upgraded to ^4.0.0?

benwoodward · 2021-09-11T07:06:58Z

unist-util-visit needs to be ^4.0.0

axmad386 · 2021-09-11T07:36:26Z

Ok, thanks for the advice @benwoodward 😊

MarcGodard · 2021-09-11T13:30:07Z

Re-posting original issue due to thread pollution:

Hi I can't seem to get this working in Svelte Kit.

Like all my other modules:

[vite] Error when evaluating SSR module /node_modules/remark-parse/index.js?v=94403ef9:
ReferenceError: module is not defined
    at /node_modules/remark-parse/index.js?v=94403ef9:3:1
    at instantiateModule (/Users/marcgodard/Documents/Github/swp-crm/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69982:166)

And If I turn SSR off I get:

[vite] Internal server error: Cannot find module './transformers/module'

Has anyone gotten this working yet?

axmad386 · 2021-09-11T15:13:25Z

Hi @MarcGodard, sorry for make pollution to your thread. I think you have 2 issue here.
First

[vite] Error when evaluating SSR module /node_modules/remark-parse/index.js?v=94403ef9:
ReferenceError: module is not defined
    at /node_modules/remark-parse/index.js?v=94403ef9:3:1
    at instantiateModule (/Users/marcgodard/Documents/Github/swp-crm/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69982:166)

This caused by ESM problem like we discuss above. Remark parse is cjs module. It cannot work on vite (svelte-kit). So to make this package work we must change how the way cjs module imported or use the esm module version of the module (if exists).
Not only remark-parse, the following module is also cjs module: lodash.debounce, lodash.throttle, remark-rehype, etc. So we just wait for maintainer update their dependency from cjs to esm version or change how the module imported
For now, I try to copy this bytemd from node_modules to src/vendor and change the code and update the dependency manually.

Second

[vite] Internal server error: Cannot find module './transformers/module'

May be this is different Issue. I cannot reproduce this in my project even I turn off ssr mode.

hhaoao · 2021-10-31T01:05:20Z

In an SSR environment, I can't even start editor

Error: <Editor> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

#87

pd4d10 · 2021-11-21T07:07:07Z

Hi all, thanks for providing so much context for this issue!

I have provided an example here, which is built with the latest version of SvelteKit (with tag next). Hope this can help

outerlook · 2021-12-18T20:19:26Z

Does this still work? Vite is always surprising on this unstable phase.

I'm getting:
Cannot find module 'codemirror-ssr/package.json' imported from '/home/project/node_modules/.pnpm/bytemd@1.10.13_supports-color@9.0.2/node_modules/bytemd/lib/@root'

for modules

lodash.debounce
lodash.throttle
codemirror-ssr
I was getting rid of the error by installing each of these deps. But I guess that isn't correct, right?

I'll try the minimum repo soon, but I'll put it here if someone else is facing it.

		"@sveltejs/kit": "1.0.0-next.202",
		"@bytemd/plugin-gfm": "1.10.13",
		"bytemd": "1.10.13"

MarcGodard · 2021-12-20T22:40:01Z

I can't get that example working in my code either.

When i build the app, it shows up (not in development at all).

When i type something, i get these errors (useless errors because its built):

TypeError: Rj is not a function
    Pj http://localhost:3000/_app/chunks/vendor-b465ee4f.js:59
    rW http://localhost:3000/_app/chunks/vendor-b465ee4f.js:66
    Fj http://localhost:3000/_app/chunks/vendor-b465ee4f.js:59
    SW http://localhost:3000/_app/chunks/vendor-b465ee4f.js:66
    t http://localhost:3000/_app/chunks/vendor-b465ee4f.js:67
    i http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    c http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    o http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    u http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    i http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    c http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    o http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    u http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    i http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    c http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    n http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    I http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    w http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    xD http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    i http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    c http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    o http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    u http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    i http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    c http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    n http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    $ http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    C http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    M http://localhost:3000/_app/chunks/vendor-b465ee4f.js:57
    update http://localhost:3000/_app/chunks/vendor-b465ee4f.js:79
    v7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    lb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    promise callback*sb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    b7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    ctx http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    he http://localhost:3000/_app/chunks/vendor-b465ee4f.js:139
    O http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    $ http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    x http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    setTimeout handler*x http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    setTimeout handler*C http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    Y http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    update http://localhost:3000/_app/chunks/vendor-b465ee4f.js:139
    v7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    lb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
vendor-b465ee4f.js:79:5040
    update http://localhost:3000/_app/chunks/vendor-b465ee4f.js:79
    v7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    lb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    (Async: promise callback)
    sb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    b7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    ctx http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    he http://localhost:3000/_app/chunks/vendor-b465ee4f.js:139
    O http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    $ http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    x http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    (Async: setTimeout handler)
    x http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    (Async: setTimeout handler)
    C http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    Y http://localhost:3000/_app/chunks/vendor-b465ee4f.js:52
    update http://localhost:3000/_app/chunks/vendor-b465ee4f.js:139
    v7 http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4
    lb http://localhost:3000/_app/chunks/vendor-b465ee4f.js:4

When i run in dev (and nothing shows up):

5:38:23 p.m. [vite] Error when evaluating SSR module /node_modules/lodash.debounce/index.js?v=3bac8306:
ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=3bac8306:377:1
    at instantiateModule (/Users/marcgodard/Documents/Github/crm/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)
5:38:23 p.m. [vite] Error when evaluating SSR module /node_modules/bytemd/lib/editor.svelte:
ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=3bac8306:375:1
    at instantiateModule (/Users/marcgodard/Documents/Github/crm/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)
5:38:23 p.m. [vite] Error when evaluating SSR module /node_modules/bytemd/lib/index.js:
ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=3bac8306:373:1
    at instantiateModule (/Users/marcgodard/Documents/Github/crm/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)
5:38:23 p.m. [vite] Error when evaluating SSR module /src/routes/admin/test/index.svelte:
ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=3bac8306:371:1
    at instantiateModule (/Users/marcgodard/Documents/Github/crm/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)
module is not defined
ReferenceError: module is not defined
    at /node_modules/lodash.debounce/index.js?v=3bac8306:369:1
    at instantiateModule (/Users/marcgodard/Documents/Github/crm/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)

magick93 · 2022-01-24T08:05:27Z

Does anyone have any suggestions on how to fix this?

It seems there is a lot of interest in using this with Sveltekit.

techydad05 · 2022-01-29T22:54:04Z

anyone ever able to get this working? Im having the same issue module not found with the lodash.debounce.

sykire · 2022-02-05T09:09:51Z

Had the same problem while importing remark-parse, remark-rehype and rehype-highlight on Astro.

remark-parse required debug which is not esm
remark-rehype required mdurl, same problem
rehype-highlight required highlight.js, same

So I had to include them on the pre-bundle with the optimizeDeps.include vite option:

{
  optimizeDeps: {
    include: ["debug", "mdurl", "highlight.js"]
  }
}

benmccann · 2022-02-28T18:23:20Z

There seems to be a few issues here:

there's a bug in Vite (Error including bytemd dependency sveltejs/vite-plugin-svelte#281)
this library isn't being packaged in the recommended manner (https://github.com/bytedance/bytemd/issues/153)
this library uses codemirror, which is rather annoying to support on Vite. That might be better with Code Mirror 6 though I haven't tried it. You can see how we run codemirror on svelte.dev here for the necessary configuration: https://github.com/sveltejs/sites/blob/ce0750bcfb8b50f67f84976c161fa4768a434647/sites/svelte.dev/svelte.config.js#L23

pd4d10 · 2022-03-01T03:31:29Z

@benmccann Thanks for the summary!

Based on the above feedback from our users, I think one of the most likely reasons may be the version dependency. The unified ecosystem packages consist of many small packages with long dependency chains, which cause the inconsistent nested package versions installed by users, while this demo works fine because the lock file in this repo happens to have the right version.

The versions we used are mainly outdated, for example, unifed and remark/rehype ecosystem packages, while the latest versions have been upgraded to ESM only. But we can't just update them to the latest versions, because it will break the users who use them directly in Node.js in CJS, for example, some users may call require('bytemd').getProcessor to convert Markdown to HTML.

So in the next minor release, I think it might be a better choice to bundle all the dependencies into it, so there won't be any version inconsistency problems for our users. Already working on it, will be done in a few weeks

pd4d10 · 2022-03-01T03:32:11Z

this library isn't being packaged in the recommended manner

Thanks for providing the guide. It's because the latest main branch is WIP, which is not ready for production.

MarcGodard · 2022-03-01T16:38:32Z

Thanks everyone. I think it is invalid packaging too.

pd4d10 · 2022-03-25T14:41:31Z

Hi all, sorry for the late fix.

Could you please help to give the latest version a try?

Noxsios · 2022-03-27T04:02:24Z

For me, I got it working using the vanilla JS config and adding bytemd to optimizeDeps. Not ideal, but it works.

pd4d10 · 2022-03-27T07:20:30Z

Also added a Sveltekit example here: https://github.com/bytedance/bytemd/tree/main/examples/svelte

Noxsios · 2022-03-27T19:09:25Z

After upgrading to bytemd@^1.12.4 Sveltekit is working w/o needing to use VanillaJS config or optimizeDeps. Thanks.

FunMiles · 2022-04-03T22:05:22Z

@pd4d10 Your example works as standalone, but when I add

    "@bytemd/plugin-gfm": "latest",
    "bytemd": "latest",

and put your index.js as a route in an existing code, I get

Error: <Editor> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

I am not understanding what is different in your example and in my code. Any idea what I may have missed?

pd4d10 · 2022-04-04T02:31:52Z

@pd4d10 Your example works as standalone, but when I add
    "@bytemd/plugin-gfm": "latest",

    "bytemd": "latest",
and put your index.js as a route in an existing code, I get
Error: <Editor> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
I am not understanding what is different in your example and in my code. Any idea what may have missed?

Could you please provide a minimal reproduction repo?

MarcGodard · 2022-04-04T22:03:57Z

I will test this this coming weekend and close issue if resolved. Thanks for the fix.

github-actions · 2022-06-04T02:07:44Z

This issue is stale because it has been open for 60 days with no activity.

tosinek · 2023-02-20T00:39:53Z

While it works in development, I cannot start the deployed app, using MeteorJS. I think it is related to this issue.

Error [ERR_REQUIRE_ESM] [ERR_REQUIRE_ESM]: Must use import to load ES Module: /built_app/programs/server/npm/node_modules/codemirror-ssr/lib/codemirror.js
        require() of ES modules is not supported.
        require() of /built_app/programs/server/npm/node_modules/codemirror-ssr/lib/codemirror.js from /built_app/programs/server/npm/node_modules/bytemd/svelte/editor.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 codemirror.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /built_app/programs/server/npm/node_modules/codemirror-ssr/package.json.

axmad386 mentioned this issue Sep 11, 2021

Bytemd not working in svelte kit project #112

Closed

This was referenced Nov 21, 2021

Failed to resolve entry for package "bytemd > @types/codemirror" #121

Closed

Memory leak on Sapper dev (watch mode) #71

Closed

This was referenced Feb 26, 2022

Cannot use in SvelteKit #139

Closed

Error including bytemd dependency sveltejs/vite-plugin-svelte#281

Closed

pd4d10 mentioned this issue Mar 1, 2022

Invalid packaging #153

Closed

MarcGodard closed this as completed Mar 1, 2022

pd4d10 reopened this Mar 26, 2022

github-actions bot added the stale label Jun 4, 2022

MarcGodard closed this as completed Jun 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cant get this working in Svelte Kit #96

Cant get this working in Svelte Kit #96

MarcGodard commented Jun 27, 2021

muellercornelius commented Jul 14, 2021

VirgileD commented Aug 25, 2021

CaptainCodeman commented Aug 27, 2021

benwoodward commented Sep 4, 2021

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021

axmad386 commented Sep 11, 2021

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021 •

edited

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021

axmad386 commented Sep 11, 2021

MarcGodard commented Sep 11, 2021

axmad386 commented Sep 11, 2021

hhaoao commented Oct 31, 2021

pd4d10 commented Nov 21, 2021

outerlook commented Dec 18, 2021

MarcGodard commented Dec 20, 2021

magick93 commented Jan 24, 2022

techydad05 commented Jan 29, 2022

sykire commented Feb 5, 2022

benmccann commented Feb 28, 2022

pd4d10 commented Mar 1, 2022

pd4d10 commented Mar 1, 2022

MarcGodard commented Mar 1, 2022

pd4d10 commented Mar 25, 2022

Noxsios commented Mar 27, 2022

pd4d10 commented Mar 27, 2022

Noxsios commented Mar 27, 2022

FunMiles commented Apr 3, 2022 •

edited

pd4d10 commented Apr 4, 2022

MarcGodard commented Apr 4, 2022

github-actions bot commented Jun 4, 2022

tosinek commented Feb 20, 2023

Cant get this working in Svelte Kit #96

Cant get this working in Svelte Kit #96

Comments

MarcGodard commented Jun 27, 2021

muellercornelius commented Jul 14, 2021

VirgileD commented Aug 25, 2021

CaptainCodeman commented Aug 27, 2021

benwoodward commented Sep 4, 2021

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021

axmad386 commented Sep 11, 2021

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021 • edited

axmad386 commented Sep 11, 2021

benwoodward commented Sep 11, 2021

axmad386 commented Sep 11, 2021

MarcGodard commented Sep 11, 2021

axmad386 commented Sep 11, 2021

hhaoao commented Oct 31, 2021

pd4d10 commented Nov 21, 2021

outerlook commented Dec 18, 2021

MarcGodard commented Dec 20, 2021

magick93 commented Jan 24, 2022

techydad05 commented Jan 29, 2022

sykire commented Feb 5, 2022

benmccann commented Feb 28, 2022

pd4d10 commented Mar 1, 2022

pd4d10 commented Mar 1, 2022

MarcGodard commented Mar 1, 2022

pd4d10 commented Mar 25, 2022

Noxsios commented Mar 27, 2022

pd4d10 commented Mar 27, 2022

Noxsios commented Mar 27, 2022

FunMiles commented Apr 3, 2022 • edited

pd4d10 commented Apr 4, 2022

MarcGodard commented Apr 4, 2022

github-actions bot commented Jun 4, 2022

tosinek commented Feb 20, 2023

benwoodward commented Sep 11, 2021 •

edited

FunMiles commented Apr 3, 2022 •

edited