Is there a way to show p5 canvas in on an astro site?

Question

I am trying to get a p5 canvas to work on an astro-generated site. And I am trying to do that by importing a jsx react component. Here is my astro page

import SketchWrapper from '../components/sketchWrapper.jsx';
import sketch from '../p5scripts/sketch.js'
...
<SketchWrapper sketch={sketch} />

sketchWrapper.jsx

import React, { useRef, useEffect } from '@astrojs/react'
import PropTypes from 'prop-types'
import p5 from 'p5'

// const SketchWrapper = 

SketchWrapper.propTypes = {
  sketch: PropTypes.func.isRequired
}

export default function SketchWrapper(props) {
  const sketchRef = useRef()
  useEffect(() => {
    new p5(props.sketch, sketchRef.current)
  }, [])
  return <div ref={sketchRef} />
}

script.js

export default function sketch(p) {

  // ~~~~~~ Initialize variables ~~~~~~~~~

  // ~~~~~~ React lifecycle methods ~~~~~~
  p.preload = () => {

  }

  // ~~~~~~ Setup ~~~~~~
  p.setup = () => {
    createCanvas(200, 200, webGL);
  }

  // ~~~~~~ Draw ~~~~~~
  p.draw = () => {
    background(0);
    fill(255);
    noStroke();
    text('Hello, world!', 10, 50);
  }
}

and package.json

  "devDependencies": {
    "@astrojs/react": "^0.1.0",
    "astro": "^1.0.0-beta.12"
  },
  "dependencies": {
    "p5": "^1.4.1",
    "prop-types": "^15.8.1",
    "react": "^18.0.0"
  }

(I've also tried to move all dependencies to devDependencies, that also doesn't work

I always get this error

Failed to resolve entry for package ".../". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package ".../". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38429:11)
    at resolvePackageEntry (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38425:9)
    at tryResolveFile (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38141:38)
    at tryFsResolve (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38123:16)
    at Context.resolveId (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:37959:28)
    at Object.resolveId (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36609:55)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async ModuleGraph.resolveUrl (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56244:26)
    at async ModuleGraph.getModuleByUrl (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56124:23)
    at async doTransform (.../node_modules/v

I am very new to astro and react, so any help would be appreciated!

score 0 · Answer 1 · answered May 05 '22 at 16:03

A solution would be to store the p5.min.js on the public folder and then just load the file from the page or layout component. <script is:inline src="/js/p5.min.js"></script>

There is no need to use react in your example.

https://p5js.org/download/

If you still want to solve the error you may want to read about Vite that is who does all the bundling.

Is there a way to show p5 canvas in on an astro site?

1 Answers1