Есть ли способ показать холст p5 на астро-сайте?

Question

Я пытаюсь заставить холст p5 работать на астро-сгенерированном сайте. И я пытаюсь сделать это, импортируя компонент реакции jsx. Вот моя астространичка

      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);
  }
}

и 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"
  }

(Я также пытался переместить все зависимости в devDependencies, это также не работает

Я всегда получаю эту ошибку

      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

Я очень новичок в астро и реагирую, поэтому буду признателен за любую помощь!

Answer 1

Решением было бы сохранить p5.min.js в общей папке, а затем просто загрузить файл со страницы или компонента макета. <script is:inline src="/js/p5.min.js"></script>

В вашем примере нет необходимости использовать реакцию.

https://p5js.org/download/

Если вы все еще хотите решить эту ошибку, вы можете прочитать о Vite, который занимается всей комплектацией.