Uncaught ReferenceError: p5 is not defined at HTMLDocument

kunal1400 commented 1 year ago

Most appropriate sub-area of p5.js?

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

p5.js version

v1.5.0

Web browser and version

Mobile Chrome

Operating System

No response

Steps to reproduce this

Steps:

Go to this URL https://search.google.com/test/mobile-friendly/result?id=F5X3651lVe1nVOJ4c8afgA
Click on view tested page and then sidebar will appear there click on more info then on Javascript console message.
There is a wiered error saying p5 not defined only on mobile but if you open same link (https://giftawave.com/wave/2421-272) on desktop then you will see its working properly.

I tried everything but nothing worked and it impacting my live site now. I think on mobile devices p5 is not working.

Please help here!!

welcome[bot] commented 1 year ago

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!

davepagurek commented 1 year ago

For what it's worth, this works for me both on desktop and mobile. I wonder if Google's mobile friendly test tool is just blocking some of the javascript from running? Does it work if, instead of dynamically adding your script tags to the page, you put the p5 script tags directly in your html (just before your script tag for your sketch's code)?

Tapo41 commented 1 year ago

I want to work on this issue

davepagurek commented 1 year ago

Thanks @Tapo41! If you'd like to do some more investigation to figure out what's causing this and what changes might have to be made to fix it, that would be great! If you find anything out, let us know in a comment on this issue 🙂

limzykenneth commented 1 year ago

@kunal1400 The way that p5.js is loaded onto your page is rather unusual

/**
* creating a new p5 sketch, all JavaScript code to be executed after page load
**/
document.addEventListener( 'DOMContentLoaded', function () {
    loadScript( wp_wave_canvas_plugin_url + "public/js/p5.min.js", () => {
        loadScript( wp_wave_canvas_plugin_url + "public/js/p5.sound.min.js", () => {
            designWaveObject = new p5(sHidden);
        })        
    })
})

/**
 * This function will load script files and after load callback will perform
 * 
 * @param {*} url 
 * @param {*} callback 
 */
function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

and would likely be why the Google mobile test page not work as it may not parse script dynamically added to <head>, as @davepagurek has noted, p5 works on mobile as expected so that's not an issue here. Is there some reason why you would need to load the script in this way as opposed to using the script tag directly (which I see is actually present in your HTML but commented out).

kunal1400 commented 1 year ago

@limzykenneth I want to make sure that p5.sound.min.js to load after p5.min.js because on "setup" function I am loading an audio file and creating waves from it. There is no function to load p5.sound.min.js after p5.min.js and I want to maintain dependency

limzykenneth commented 1 year ago

That normally would not be a problem as by the time setup() is run, p5.min.js and p5.sound.min.js should both be loaded already. However if you want to guarantee loading order you can use the defer attribute as described here.

processing / p5.js