Errors when used with SvelteKit

[davidh10]

Hello, when i updated to the latest version of everything in my Sveltekit app, I started to get this error on every page with the markdown on it. Both the Viewer and Editor. Any idea what this is or how it can be solved?

proxy.js?v=892a008e:15 [HMR][Svelte] Unrecoverable HMR error in <Markdown>: next update will trigger a full reload

index.mjs:300 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$$')
    at init (index.mjs:300:46)
    at new Editor (index.mjs:2988:5)
    at create_fragment (Markdown.svelte? [sm]:3:32)
    at init (index.mjs:2031:37)
    at new Markdown (Markdown.svelte? [sm]:13:70)
    at createProxiedComponent (svelte-hooks.js?v=892a008e:341:9)
    at new ProxyComponent (proxy.js?v=892a008e:242:7)
    at new Proxy<Markdown> (proxy.js?v=892a008e:349:11)
    at create_fragment (http://localhost:5173/src/routes/(admin)/admin/deals/[deal]/+page.svelte:309:14)
    at init (index.mjs:2031:37)

[multicam]

Hi, I am experiencing the same error --
It looks like the problem is coming from SvelteKit --
I have rolled back bytemd versions down to 1.17.4 and the error persists --
Opinions on moving forward?

[multicam]

Update -- trying to run the svelte sample that comes with the repo -- npm install faills:

 
> @bytemd/example-svelte@0.0.1 prepare
> svelte-kit sync

> No routes found. If you are using a custom src/routes directory, make sure it is specified in svelte.config.js
    at create_routes_and_nodes (file:///media/ssdev/multicam/bytemd-svelte/node_modules/@sveltejs/kit/src/core/sync/create_manifest_data/index.js:268:11)
    at create_manifest_data (file:///media/ssdev/multicam/bytemd-svelte/node_modules/@sveltejs/kit/src/core/sync/create_manifest_data/index.js:25:28)
    at create (file:///media/ssdev/multicam/bytemd-svelte/node_modules/@sveltejs/kit/src/core/sync/sync.js:25:24)
    at Module.all (file:///media/ssdev/multicam/bytemd-svelte/node_modules/@sveltejs/kit/src/core/sync/sync.js:58:15)
    at file:///media/ssdev/multicam/bytemd-svelte/node_modules/@sveltejs/kit/src/cli.js:38:15
npm ERR! code 1
npm ERR! path /media/ssdev/multicam/bytemd-svelte
npm ERR! command failed
npm ERR! command sh -c svelte-kit sync

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jean-marc/.npm/_logs/2023-02-08T22_52_40_391Z-debug-0.log

Node version 19.6.0
NPM version 9.4.2

[pd4d10]

Could you please provide a minimal repo for reproduction?

[davidh10]

Could you please provide a minimal repo for reproduction?

Not my repo but someone else created example. Look in the console with this template project.
https://stackblitz.com/edit/sveltejs-kit-template-default-doe5ur?file=src/routes/+page.js

[warrenshekyls]

here is a stackblitz using Vite+Svelte (no sveltekit), also erroring:
Uncaught TypeError: Cannot read properties of undefined (reading '$$')

https://stackblitz.com/edit/vitejs-vite-tkckzv

[pd4d10]

here is a stackblitz using Vite+Svelte (no sveltekit), also erroring:
Uncaught TypeError: Cannot read properties of undefined (reading '$$')

https://stackblitz.com/edit/vitejs-vite-tkckzv

It seems to work in my browser, with the CSS import statement uncommented

[warrenshekyls]

Yes you are right, I closed my Stackblitz browser tab down. Re-opened the stackblitz from a brand new browser, and it now works. So latest version works with Vite+Svelte (no sveltekit).

[gjolga]

Experiencing the same issue in sveltekit when running with vite dev:

With vite build and vite preview everything works fine.

sveltekit version: 1.3.10

[pd4d10]

Perhaps related to #162

[Doomd]

I created a simple reproduction using the latest version of Sveltekit (1.6.0) and ByteMD (1.20.2), and I updated all packages, and pretty much copy and pasted the Svelte usage code from this repo's README.

https://github.com/Doomd/reproduction-sveltekit-bytemd-broken

I can successfully run the test site with vite dev, but clicking on the links to any pages that have the <Editor /> or <Viewer /> components in them, fails completely (without rendering anything). BUT, if you refresh the browser from the route containing one of the bytemd components (or open the site directly into one of these bytemd containing routes), then the component WILL render, but there are still console errors that will cause the Editor component especially to not function as an editor. I tried enabling/disabling prerendering, ssr, csr...to no avail.

I would have created a Stackblitz repo, but everytime I installed bytemd, upon reloading the code, the entire app would crash due to a memory overload. But I did test the github reproduction only five minutes ago and it causes all major browsers to spit out console errors.

[yonnic]

same problem as in #162
the solution so far is to load the source code from the node package directly and compile it with the svelte version of your project

[giovankes]

downgrading to 1.16 worked in my case

[matiasfha]

I tried the "load only the source code from the node package" workaround without any luck.

Is there any other idea to overcome this issue?

[superiums]

function init(component, options, instance2, create_fragment2, not_equal2, props, append_styles, dirty = [-1]) {
  const parent_component = current_component;
  set_current_component(component);
  const $$ = component.$$ = {
    fragment: null,
    ctx: [],
    props,
    update: noop,
    not_equal: not_equal2,
    bound: blank_object(),
    on_mount: [],
    on_destroy: [],
    on_disconnect: [],
    before_update: [],
    after_update: [],
    context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
    callbacks: blank_object(),
    dirty,
    skip_bound: false,
    root: options.target || parent_component.$$.root              // <---------
  };

......

seems this is because parent_component is undefinded.

code if from bytemd/dist/index.mjs

[0gust1]

we had this error. we got it to work by adding

  optimizeDeps: {
    exclude: ['bytemd']
  }

in our vite.config.ts file.

precision:

• we use bytemd in routes where SSR and prerendering are disabled
• we import the svelte components, not the compiled code.

[github-actions]

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

[seo-rii]

This should not be marked as stale. It's still a issue breaks it's usage.

[bluzky]

I went over this issue sveltejs/svelte#6646

And this could be the cause of this issue:

the underlying problem, which is that people are using different compiled versions of Svelte mixed up in the same project

if I change the import section in the package.json of the package

exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
}

to

exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./svelte/index.js",
      "require": "./dist/index.js"
    },
}

But in that case I have to create a fork, is there any way to use uncompiled component?

[aviadbd]

This is still an issue; any fix planned?

To be clear, @0gust1 's fix works.

[ZachSaucier]

Additionally to this error, I am getting this warning:

[vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

bytemd@1.21.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

[github-actions]

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

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale.