Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Javascript error in running this sketch #3268

Open
jht9629-nyu opened this issue Nov 7, 2024 · 8 comments
Open

Javascript error in running this sketch #3268

jht9629-nyu opened this issue Nov 7, 2024 · 8 comments
Labels
Bug

Comments

@jht9629-nyu
Copy link

jht9629-nyu commented Nov 7, 2024 •
edited
Loading

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

Snippet:

// Paste your code here :)
@jht9629-nyu jht9629-nyu added the Bug label Nov 7, 2024
@raclim
Copy link
Collaborator

raclim commented Nov 7, 2024

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

@raclim
Copy link
Collaborator

raclim commented Nov 7, 2024

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
Copy link
Author

jht9629-nyu commented Nov 7, 2024 via email

@raclim raclim mentioned this issue Nov 13, 2024
Merged
4 tasks
@lindapaiste
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

@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
Copy link
Collaborator

raclim commented Nov 14, 2024

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.

Harshit-7373 added a commit to Harshit-7373/p5.js-web-editor that referenced this issue Dec 3, 2024
@Harshit-7373
Solved issue # 3268
acc8344 
Javascript error in running this sketch processing#3268.

github - Harshit-7373
@Harshit-7373 Harshit-7373 mentioned this issue Dec 4, 2024
Closed
4 tasks
@Harshit-7373
Copy link

Hi , I created a pull request to resolve this issue effectively. Please review and provide feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lindapaiste @raclim @jht9629-nyu @Harshit-7373