search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.41k stars 1.35k forks source link

Javascript error in running this sketch #3268

Open jht9629-nyu opened 2 weeks ago

jht9629-nyu commented 2 weeks ago

p5.js version

Web Editor: v2.12.9 , p5.js: v1.9.2

What is your operating system?

Mac OS

Web browser and version

Version 124.0.6367.62 (Official Build) (arm64)

Actual Behavior

Run this sketch https://editor.p5js.org/sairamved/sketches/kHR1qrQC5

Get this error

const { _report } = window.p5;

TypeError: Cannot read properties of undefined (reading '_report') at undefined:2:36978

Expected Behavior

No error

Steps to reproduce

Steps:

open editor https://editor.p5js.org/sairamved/sketches/kHR1qrQC5 run

    1. 3.

      Snippet:

// Paste your code here :)

raclim commented 2 weeks ago

Thanks for raising this @jht9629-nyu, will look into it!

raclim commented 2 weeks ago

Looking into it, I think the error was triggered by lines 4 and 6 in the index.html file. Once I removed them, they were able to disappear for me. Since the console shouldn't be returning these types of messages, I'll try to make some adjustments in the previewEntry.js file, which I think is where it can be resolved, and push it out within the next few days!

jht9629-nyu commented 2 weeks ago

Thanks for the response. Best to be safe - all kinds of extra characters can end up in index.html I think this student was following chat-GPT

Be well, -{ john-henry }-[ thompson ]

On Thu, Nov 7, 2024 at 3:55 PM raclim @.***> wrote:

Looking into it, I think the error was triggered by lines 4 and 6 in the index.html file. Once I removed them, they were able to disappear for me. Since the console shouldn't be returning these types of messages, I'll try to make some adjustments in the previewEntry.js file https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_processing_p5.js-2Dweb-2Deditor_blob_5e5ef5f19b70fc3cd7a955d7b07fdfa6443b9321_client_utils_previewEntry.js-23L151&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=UCFvUQurfK8Qyy8EfTquZw&m=OejBJWpqgrYEHmzb0thTzz-pQpPtabpe74E2pxFcJipYV8clGimCSmehXvySdyqO&s=4GcNNu-Xj-6iqadAWnX4TM9KjpsfMaIYz_gc9ojRO6E&e=, which I think is where it can be resolved, and push it out within the next few days!

— Reply to this email directly, view it on GitHub https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_processing_p5.js-2Dweb-2Deditor_issues_3268-23issuecomment-2D2463192067&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=UCFvUQurfK8Qyy8EfTquZw&m=OejBJWpqgrYEHmzb0thTzz-pQpPtabpe74E2pxFcJipYV8clGimCSmehXvySdyqO&s=0gNY24lxv7VE76eC2eZE_Y5MkEwxIHPRv4EcKhOdGDs&e=, or unsubscribe https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ASZWD3MK4VGUK3KT6MFUWJ3Z7PHSNAVCNFSM6AAAAABRLXCTEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINRTGE4TEMBWG4&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=UCFvUQurfK8Qyy8EfTquZw&m=OejBJWpqgrYEHmzb0thTzz-pQpPtabpe74E2pxFcJipYV8clGimCSmehXvySdyqO&s=T6SQ9cT8CJIvTXIZL86IomJKoWSXzOm3Z6krlHUWN50&e= . You are receiving this because you were mentioned.Message ID: @.***>

lindapaiste commented 1 week ago

I'm seeing an additional error which may or may not be related

GET https://editor.p5js.org/sairamved/sketches/undefined 404 (Not Found)

We should look into where that is coming from, and if we are loading files properly.

lindapaiste commented 1 week ago

Looking into it, I think the error was triggered by lines 4 and 6 in the index.html file. Once I removed them, they were able to disappear for me. Since the console shouldn't be returning these types of messages, I'll try to make some adjustments in the previewEntry.js file, which I think is where it can be resolved, and push it out within the next few days!

The core error is that window.p5 is not defined at the moment when that script is executed. Which should not happen because this is the document (iframe/blob) for the sketch itself, where we should be loading p5.

I looked in dev tools at the document that is being loaded (it is something like blob:https://preview.p5js.org/32ddd651-7acb-42cf-b2a6-0b3d822c449f but those numbers change each time)

<!DOCTYPE HTML>
<html lang="en"><head><script>
    window.offs = [];
    window.objectUrls = {"blob:https://preview.p5js.org/8ff58a23-7f57-469f-989d-97f4a9cbfc0b":"/sketch.js"};
    window.objectPaths = {"8ff58a23-7f57-469f-989d-97f4a9cbfc0b":"sketch.js"};
    window.editorOrigin = 'https://editor.p5js.org';
  </script>
     <base href="https://preview.p5js.org/sairamved/sketches/kHR1qrQC5/"><style>
html, body {
  margin: 0;
  padding: 0;
  color: red;
}

canvas {
  display: block;
}
</style><script src="https://preview.p5js.org/previewScripts.1bd8c58b202ad344fd60.js" crossorigin=""></script></head><body>//Click
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js" crossorigin=""></script>
    //
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js" crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/addons/p5.sound.min.js" crossorigin=""></script>

    <meta charset="utf-8">

    <main>
    </main>
    <script src="blob:https://preview.p5js.org/8ff58a23-7f57-469f-989d-97f4a9cbfc0b"></script>

</body></html>

I can see that the scripts are loaded in the wrong order. Our previewScripts file, which expects p5 in the window, is loaded before p5 is loaded.

Now I need to amend my previous statement "where we should be loading p5" because really it's "where we expect the user's sketch to be loading p5". As that is something not fully in our control, I think that the changes you were making towards allowing window.p5 to be optional are good.

But additionally, and more importantly, we need to be injecting the previewScripts file AFTER the user's file. This is sounding very familiar and I'm pretty sure that we have an issue about this already. What I recall from that issue is that there were problems if the user put the <script> tag in the <body> instead of the <head>. Oddly, that's now what I'm seeing when I look at the index.html in the editor. But it is what I'm seeing in the modified version of that file (in the blob). In this particular case I believe It's due to the user having invalid content in their index.html file which confuses our parsing. I'm talking about the //Click line which is not how you do comments in HTML. But we should expect users to make those sorts of mistakes and we need to either handle it anyways or alert then that they have invalid HTML, rather than failing with something seemingly unrelated.

lindapaiste commented 1 week ago

@raclim I searched for _report and actually found 4 different issues where users reported this (pun intended)

2103

2145

2327 - this one we pushed a fix, but then rolled it back because it broke something else, iirc

3225

raclim commented 1 week ago

Thanks so much for consolidating these!!!

I mentioned this in the PR comments, but also adding here that I'm thinking we could push out the change where window.p5 is optional in previewEntry.js as a temporary fix, but keep this issue open and revisit the PR I rolled back that changed where previewScripts is loading in EmbedFrame.jsx.