Should add error message when Canvas.parent couldn't be found

[Falling10fruit]

Increasing Access

This will help beginners, especially if they're copying a project as a template.

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [X] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Feature enhancement details

When the user attempts to attach the canvas to a non-existing element, a Friendly Error should appear instead, replacing the "appendbody" error

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

Hi @Falling10fruit, I don't quite understand what you are referring to here in this issue, can you perhaps expand on it a bit more? Some sample code would be great as well. Thanks.

[Falling10fruit]

Is it better now?

[limzykenneth]

Do you mean something like this:

function setup() {
  let canvas = createCanvas(400, 400);
  canvas.parent("myContainer");
}

where a container with id myContainer does not exist?

If that's the case I'm seeing the following from FES

🌸 p5.js says: An error with message "p is null" occured inside the p5js library when parent was called (on line 3 in sketch.js [/sketch.js:3:10])

If not stated otherwise, it might be an issue with the arguments passed to parent. (http://p5js.org/reference/#/p5/parent) 

While not very specific, it still did point out possible issue with arguments passed to parent

[Falling10fruit]

That didn't happen to me

[limzykenneth]

Are you using p5.js (instead of p5.min.js) as FES is not included in the minified version.

[Falling10fruit]

Doesn't understand Um, yes I'm using p5.js through the script tag in VSCode

[justlucdewit]

@Falling10fruit what @limzykenneth meant was if you were using the minified version of p5.js, because FES is not included in the minified version

check if your version is the minified one by looking if the js file that you include to include p5js ends with .min.js or just with .js if you still cant figure that out, then please send us the src="" attribute of the script tag that includes p5

[Falling10fruit]

Oh, I'm using p5.js, not p5.min.js

[limzykenneth]

@Falling10fruit Can you share a simplified version of your project with us (HTML and JS)?

[Falling10fruit]

`

`

`function setup() { // put setup code here var Canvas = createCanvas(0,0); Canvas.parent("Non-existent_Tag"); }

function draw() { // put drawing code here }`

[Falling10fruit]

To simplify my mistake up there, all I did was add var Canvas = createCanvas(0,0,); & Canvas.parent("Non-existent_Tag"); in the empty example.

[limzykenneth]

Using the following sketch and p5.js 1.4.1 I'm still not able to replicate the issue

function setup(){
  var Canvas = createCanvas(0, 0);
  Canvas.parent("Non-existent_Tag");
}

FES message in console:

🌸 p5.js says: [main.js, line 3] An error with message "p is null" occurred inside the p5js library when parent was called. If not stated otherwise, it might be an issue with the arguments passed to parent. (http://p5js.org/reference/#/p5/parent)

Can you try replacing the p5.js script tag src URL value to https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js?

[Falling10fruit]

No difference

[limzykenneth]

Have you tried replacing the script tag URL as mentioned?

[Falling10fruit]

Yes I did that

[limzykenneth]

But the error in the debug console doesn't show that the error comes from the CDN version but from a local file instead.

[Falling10fruit]

So how do I do that?

[limzykenneth]

I'm not entirely sure how you are currently running the html file as I'm expecting console messages from the browser console but you are showing the debug console in VSCode (I don't use it much) so I can't advise much from the provided info. You may want to move your question to the forum as it pertains more to your own code and I can't replicate the mentioned issue. Thanks.

[Falling10fruit]

The debug console in VS Code is pretty much the same with the browser console. But instead it also gathers data from other tabs in the same window. Note that it creates a new window so it doesn't interfere with other tabs that I'm currently using.

Here's what the error looks like in the browser:

[Falling10fruit]

Also, I don't have an account for the forums.

[Ayush23Dash]

Hi @Falling10fruit, @limzykenneth : I tried replicating this issue. So the problem is something as follows: FES messages are being displayed in some browsers like Firefox(as expected) and are not being displayed in some versions of Chrome. I also had a discussion with @nbriz @almchung regarding a similar issue that I was facing.

[limzykenneth]

@Ayush23Dash I'm still not sure what the issue is, can you share the replication steps?

[Falling10fruit]

Seeing how there is so much difficulty in replicating this bug, I think my laptop is broken.

On Thu, Jun 29, 2023, 20:19 Kenneth Lim @.***> wrote:

@Ayush23Dash https://github.com/Ayush23Dash I'm still not sure what the issue is, can you share the replication steps?

— Reply to this email directly, view it on GitHub https://github.com/processing/p5.js/issues/5650#issuecomment-1613171575, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUI34SYUY4X3PYXFO3KW4SLXNV6GVANCNFSM5R64IPFQ . You are receiving this because you were mentioned.Message ID: @.***>