Anyone managed to integrate Plasmic with SkelteKit?

Developer Support
1

:question: Does anyone managed to integrate Plasmic within SvelteKit? (cf. this GitHub issue)

2

@fmota

3

Hi @monetary_boar, we currently do not have documentation on how to use svelte, but for SvelteKit the following is supposed to work:

lib/init.js

import { initPlasmicLoader } from '@plasmicapp/loader-svelte';

export const PLASMIC = initPlasmicLoader({
	projects: [
		{
			id: 'ID',
			token: 'TOKEN'
		}
	],
	preview: true
});

routes/index.svelte

<script lang="ts">

	import { PLASMIC } from "$lib/init";
	import { PlasmicComponent, PlasmicRootProvider } from "@plasmicapp/loader-svelte";

	const COMPONENT_NAME = "COMPONENT_NAME";
</script>

<PlasmicRootProvider loader={PLASMIC} >
	<PlasmicComponent component={COMPONENT_NAME}/>
</PlasmicRootProvider>

I am not facing the issue that you reported on the github issue, maybe its because of the line import PLASMIC from '$lib/plasmic-init.svelte'; that should be import { PLASMIC } from '$lib/plasmic-init.svelte'; but dependes on your init file, anyway, feel free to reach out here, I will create a complete example later so that I can close this issue

4

Thanks a lot for your reply and help Felipe! I’m testing your solution right now but I’m still getting errors.

The requested module '/node_modules/isomorphic-unfetch/browser.js?v=a6d96a1d' does not provide an export named 'default'

SyntaxError: The requested module '/node_modules/isomorphic-unfetch/browser.js?v=a6d96a1d' does not provide an export named 'default'

I’m going to retry from a fresh install. I’ll keep you posted. :slightly_smiling_face:

5

Same error with a fresh installation…
I’ve updated the GitHub issue with a step by step to reproduce @fmota.
Feel free to ask more info if needed, I volunteer to help solve this issue! :raised_hands:

6

@monetary_boar sorry about the previous response, I see it now, when I tested in a clean environment I got the same error as you, while the bug is not solved in loader-svelte, one quick fix that worked for me was installing and using @plasmicapp/loader-react in the init file, but using @plasmicapp/loader-svelte in the svelte files, could you try this and check if it works ?

import { initPlasmicLoader } from '@plasmicapp/loader-react';

export const PLASMIC = initPlasmicLoader({
	projects: [
		{
			id: 'ID',
			token: 'TOKEN'
		}
	],
	preview: true
});
7

It woooooorks!!! :star-struck::star-struck::star-struck:
Thanks a lot @fmota. I update the Github issue with this workaround. :tada: :thumbsup:

8

:question: Can I help to fix this one? If you point me in the right direction, I can have a look. :slightly_smiling_face: