Run p5js with Parcel

Hi there,

I’m trying to run a script based on p5js library, it works well in a classic file (index.html, css, and scripts) but if I run this with parcel (npm run dev), there are no errors but the elements expected are not created in the page.

(I create a canvas in the setup function, to have a cursor trail one my page, but the canvas don’t appears when i run width Parcel)

Do someone know how to fix that ?

I share my repository : https://github.com/Diarit-S/Site-Portfolio

Sorry for my english and thanks for the help !

1 Like

no idea, but i see at

index.html

you link to a old p5.js version

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

https://cdnjs.com/libraries/p5.js !

just for info, good luck.

Thanks for that ! It’s not working with the latest version too

@Lotas94 Hey there I can help you. Parcel bundles the libraries that are imported into your code. Moreover, when you do this with p5, you’ll need to use the instance mode of p5. This is because Parcel will create separate scopes for all modules (i.e. no more global variables!).

I have a project that does exactly this (parcel and p5). You can see the code and learn from there.

3 Likes

Thank you for your response mebble ! I will check the instance mode and your work ! I’m coming back to give news :slight_smile:

@mebble thankkkkk youu it works ! And I learn somthing new ! Have a nice week !

1 Like

Glad I could help! Happy coding :nerd_face: