tonyketcham/p5-svelte

Example does not work.

Closed this issue ยท 6 comments

npm install p5-svelte

Error: 'default' is not exported by node_modules/p5/lib/p5.min.js, imported by node_modules/p5-svelte/src/p5/action.js

@rawoke083 when I'm following the example in a mac environment, npm install p5-svelte installs p5 as a peer dependency and this error doesn't occur.

Yet trying the same on Code Sandbox, the peer dependencies aren't being respected for some reason, so adding p5 as a dependency resolves the error: https://codesandbox.io/s/p5-svelte-demo-zvlcm?file=/App.svelte

Perhaps that's the case here - have you tried npm install p5 -D?

Perhaps that's the case here - have you tried npm install p5 -D?

Nah still getting same error... weird :(

Are you installing to a fresh svelte project using the official template?

Also what environment are you running? Unfortunately, I've been unable to reproduce this issue

I had this in Sapper. Here's how I fixed it:

  1. Remove both p5 and p5-svelte.
  2. Install both p5 and p5-svelte but with -D this time.
  3. Make some changes in the example code:
//import P5 from 'p5-svelte';
import { onMount } from "svelte";

let P5;

onMount(async () => {
	const module = await import("p5-svelte");
	P5 = module.default;
});

and

<!-- <P5 {sketch} /> -->
<svelte:component this={P5} {sketch} />

I had this in Sapper. Here's how I fixed it:

  1. Remove both p5 and p5-svelte.
  2. Install both p5 and p5-svelte but with -D this time.
  3. Make some changes in the example code:
//import P5 from 'p5-svelte';
import { onMount } from "svelte";

let P5;

onMount(async () => {
	const module = await import("p5-svelte");
	P5 = module.default;
});

and

<!-- <P5 {sketch} /> -->
<svelte:component this={P5} {sketch} />

Wow good(clever) work-around :)

@dogfuntom Thanks! I just updated the documentation!