P5 example runs, but when I copy the code into a new project P5 functions undefined

Hello all, I have the following problem, most likely silly user (me) error:

  1. Visit https://p5-demos.glitch.me/ and verify this works
  2. Click the “Remix to Edit” button. It still works.
  3. Make a new project based on glitch hello website
  4. copy index.html and script.js from the p5 demo into the new project
  5. All of the P5 functions in the script are flagged with a red dot, and hovering over them shows that they are not defined.

The index.html copied from the demo includes the P5 library, but apparently I’m missing something else.

What am I missing?

Hi @michaelshiloh, welcome!

I followed your instructions, remixing and also “ripping” the content from one of the examples (I used the rotating rectangle) and was able to reproduce your problem.

After a little fiddling, here’s how I solved it:

Copy across the .eslintrc.json file from the original project to your own

Go into the Glitch terminal and run the command refresh

This gives ESLint new rules to play by, and I think somehow the config specified in the original project stops it checking for unknown globals. However, the new config only kicks in after running refresh.

Hope it works for you!!

2 Likes

Thanks @SteGriff that worked! Thanks! I would like to understand this better; seems that if a library is specified there should be a way to make it check for unknown function names in that library.

Another friend pointed out that even with the errors, it worked. So, another reference point although I don’t know enough yet to draw useful conclusions.

Anyway, thanks again, and if anyone can explain further what’s going on I’d welcome that.

2 Likes

I have further discovered that the errors go away even if .eslintrc.json file contains only two characters:
{}

Here’s my understanding:

The project does “just work”, the script and HTML work together fine, as you know they should :slight_smile:

On Glitch, the sketch.js file doesn’t “know about” any other scripts pulled in by your index html, unfortunately. So it can’t say whether the p5 functions exist.

  • Glitch has some default ESLint rules, which are used to show errors in the editor
  • Adding your own eslintrc overrides these rules
  • So, adding an empty {} eslintrc overrides it with “there are no rules”

Instead of overriding the eslintrc, you can also use a little trick to tell Glitch that there are globally available functions/objects, with a comment at the top of your JS like this:

/* global Vue, VueLocalStorage */

I do this in a lot of my projects, e.g. https://glitch.com/edit/#!/japapad?path=script.js%3A1%3A0

Good feedback! Hope this helps explain some stuff (and I hope I’m mostly right… :slight_smile: )

1 Like

Hi @SteGriff thanks again, this works nicely. Do you know where this is mentioned in the documentation? I’d like to learn more.

Thanks again,
Michael

Not sure there’s anything specific in the docs for this; here’s the closest thing I could find: Will Glitch clean up my code formatting? - Glitch Support

Thanks I’ll check it out