Usage With Svelte Kit

[stolinski]

I'm seeing

TypeError: Line must be greater than or equal to 1, got -1
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:68868:13)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:68937:22)
    at /Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69883:34
    at String.replace (<anonymous>)
    at /Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69873:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69872:10)
    at Object.ssrFixStacktrace (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:70196:27)
    at Object.handle_error (file:///Users/scotttolinski/Sites/levelup/svelteui/node_modules/@sveltejs/kit/dist/chunks/index.js:3353:19)
    at respond$1 (file:///Users/scotttolinski/Sites/levelup/svelteui/node_modules/@sveltejs/kit/dist/ssr.js:998:11)

in the ui and on the server this

5:08:54 PM [vite] Error when evaluating SSR module /node_modules/prism-svelte/index.js:
ReferenceError: Prism is not defined
    at /node_modules/prism-svelte/index.js:3:1
    at instantiateModule (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69982:166)
Prism is not defined
ReferenceError: Prism is not defined
    at /node_modules/prism-svelte/index.js:1:1
    at instantiateModule (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69982:166)
Line must be greater than or equal to 1, got -1
TypeError: Line must be greater than or equal to 1, got -1
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:68868:13)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:68937:22)
    at /Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69883:34
    at String.replace (<anonymous>)
    at /Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69873:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:69872:10)
    at Object.ssrFixStacktrace (/Users/scotttolinski/Sites/levelup/svelteui/node_modules/vite/dist/node/chunks/dep-0ed4fbc0.js:70196:27)
    at Object.handle_error (file:///Users/scotttolinski/Sites/levelup/svelteui/node_modules/@sveltejs/kit/dist/chunks/index.js:3353:19)
    at respond$1 (file:///Users/scotttolinski/Sites/levelup/svelteui/node_modules/@sveltejs/kit/dist/ssr.js:998:11)

[stolinski]

Not sure why the formatting is off here, I can provide a reproduction, but it's basically just tossing the example code on to a server rendered page and refreshing.

[pngwn]

Weird, I'll take a look at this.

Do you know what specifically was being highlighted?

[stolinski]

It was mad at the import of 'prism-svelte'. Commenting that out and leaving just prism has no issues.

[pngwn]

Ah right. I'll take a look.

[pngwn]

I think this is specific to dev mode. I can reproduce in dev but the prod build seems to work fine. I think this is something to do with the way handles certain dependencies. Going to see if I can find a solution.

[pngwn]

This isn't specific to this package, it also causes Prism to fail in my tests. If I remove the import for prism-svelte and just try to highlight with Prism i get:

Cannot read property 'highlight' of undefined

I'm guessing this is because Prism is shipped as UMD and attaches itself to the global namespace. This clearly doesn't play nicely with how Vite is handling things in dev mode. WIll keep digging.

[pngwn]

The reason prism-svelte will throw an error even earlier than that is due to how new syntaxes are added to Prism, by modifying that global namepsace (which in this instance, does not exist).

[pngwn]

repro: https://github.com/pngwn/kit-prism-ssr-bug

[pngwn]

another repro, with only vite: https://github.com/pngwn/vite-prism-ssr-bug

[benmccann]

I'm having trouble as well while trying to migrate svelte.dev to SvelteKit. It seems not to like Prism global variable:

ReferenceError: Prism is not defined
    at /node_modules/prism-svelte/index.js:1:1

Any idea what I might need to do to define it?

My code is here: https://github.com/benmccann/svelte/tree/sveltekit. It may not run until https://github.com/sveltejs/svelte-repl/pull/170 is merged though

[pngwn]

This is a vite issue as far as I can tell. I have reproed only with vite and Prism. Only happens during SSR, so something to do with vite, SSR and the dev server. Only way I can make it go is by using global.Prism ton instantiate but that will break very quickly due to how prism adds grammars.

[bluwy]

Tried to repro this today and it works ootb for me. From the error logs, it looks like the packages weren't prebundled, but this shouldn't be the case now as SvelteKit enabled prebundling and vite-plugin-svelte handles them properly.

[pngwn]

@stolinski Is this bug still present or did the vite changes mentioned above fix this issue?

[benmccann]

I haven't had any issues with the latest versions

[pelletier197]

I just faced the same issue and found that I could fix it by adding prism-svelte to the noExternal deps in vite.

// svelte.config.js
import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-static'

export default {
  preprocess: [preprocess()],
  kit: {
    adapter: adapter(),
    prerender: {
      default: true,
    },
    vite: {
      ssr: {
        noExternal: ['prismjs', 'prism-svelte'],
      },
    },
  },
}