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

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!

Solution 1:^[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Eloi

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]