Uncaught refrence error P5 is not defined

[hk2166]

Description

While loading the application, a runtime error occurs due to an undefined variable being used during i18next language initialization.

Expected Behavior

The app should launch without showing any type of reference error

Screenshots

How to Reproduce

While the app is loading after npm run dev
Check the console for this error

Console log Errors:

Uncaught ReferenceError: p5 is not defined
at Object. (p5.sound.min.js:2:50019)
at r (p5.sound.min.js:2:110)
at Module. (p5.sound.min.js:2:94688)
at r (p5.sound.min.js:2:110)
at p5.sound.min.js:2:902
at p5.sound.min.js:2:912

Environment:

• Operating System: macOS

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[vyagh]

Hey! I spent some time investigating.

The issue:

p5.min.js checks for AMD loaders (typeof define === "function" && define.amd) and when it detects RequireJS, it registers as an AMD module instead of setting window.p5. and p5.sound.min.js expects window.p5 to be in the global scope, which causes the reference error.

Both are loaded async through RequireJS in js/activity.js#L63-65, creating a race condition where p5.sound tries to access p5 before it's available globally.

What I tried:

Tested several approaches - RequireJS shim config, wrapper modules, script tag loading, and AMD detection bypass. Unfortunately none worked without breaking other parts of the module loading system.

Need some guidance on approach:
Would appreciate inputs on the best approach here since it involves core module loading architecture.
Some questions i had:

• Should p5/p5.sound be loaded outside RequireJS?
• does this error actually break functionality, or is it just a console warning? The app seems to work fine otherwise.
• would p5 instance mode be appropriate here?

Happy to implement whichever direction works the best!

[saurabh24thakur]

I want to work on this issue please assign it to me..

Plan of Action:

1. Modify js/loader.js to include RequireJS shims for p5.min, p5.sound.min, and p5.dom.min.
2. Ensure p5.min exports the global p5 object.
3. Define p5.min as a dependency for p5.sound.min and p5.dom.min to resolve the race condition.
4. Verify the fix by running the application locally.

I will be raising a Pull Request shortly with these changes.