Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example does not work. #6

Closed
rawoke083 opened this issue Jan 22, 2021 · 6 comments
Closed

Example does not work. #6

rawoke083 opened this issue Jan 22, 2021 · 6 comments

Comments

@rawoke083
Copy link

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
@tonyketcham
Copy link
Owner

@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?

@rawoke083
Copy link
Author

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

Nah still getting same error... weird :(

@tonyketcham
Copy link
Owner

tonyketcham commented Jan 23, 2021

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

@dogfuntom
Copy link

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} />

@rawoke083
Copy link
Author

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 :)

@tonyketcham
Copy link
Owner

@dogfuntom Thanks! I just updated the documentation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants