When bundling p5 with React using create-vite-app, you get a build error

[themonk911]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [X] Build Process
• [ ] Unit Testing
• [ ] Internalization
• [ ] Friendly Errors
• [ ] Other (specify if possible)

p5.js version

1.9.0

Web browser and version

No response

Operating System

No response

Steps to reproduce this

Steps:

1. Create a vite app
2. Add p5 to the package.json
3. Run npm run build

Snippet:

Here's a snippet from my package.json.

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "eslint-import-resolver-alias": "^1.1.2",
    "fuse.js": "^7.0.0",
    "p5": "^1.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-modal": "^3.16.1"
  },

Here's the resulting error message.

error during build: RollupError: Identifier "r" has already been declared at error (file://.../node_modules/rollup/dist/es/shared/parseAst.js:337:30) at Module.error (file://.../node_modules/rollup/dist/es/shared/node-entry.js:12728:16) at BlockScope.addDeclaration (file://.../node_modules/rollup/dist/es/shared/node-entry.js:7522:32) at Identifier.declare (file://.../node_modules/rollup/dist/es/shared/node-entry.js:7193:39) at VariableDeclarator.declareDeclarator (file://.../node_modules/rollup/dist/es/shared/node-entry.js:10169:17) at VariableDeclaration.initialise (file://.../node_modules/rollup/dist/es/shared/node-entry.js:11834:24) at new NodeBase (file://.../node_modules/rollup/dist/es/shared/node-entry.js:4607:14) at new VariableDeclaration (file://.../node_modules/rollup/dist/es/shared/node-entry.js:11806:1) at BlockStatement.parseNode (file://.../node_modules/rollup/dist/es/shared/node-entry.js:4718:27) at new NodeBase (file://.../node_modules/rollup/dist/es/shared/node-entry.js:4606:14)

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

p5.js is not currently designed to be bundled as part of your code in this way. We are investigating updating it but it will take time to fully migrate. The recommended way to use p5.js is through a <script> tag include and accessing the p5 contructor in your code.

[arghaDEVIL]

The error message you're encountering is a RollupError indicating that the identifier "r" has already been declared. This typically happens when you have a variable, function, or some other identifier named "r" declared more than once in the same scope. Review your code to identify where the identifier "r" is declared. Look for duplicate declarations of the same identifier within the same scope.