[p5.js 2.0 Bug Report]: Using syntax features from ECMAScript 2022 (and later) results in spurious FES console error

[dontwanttothink]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2.0

Web browser and version

All browsers (including Safari for macOS 26.2 and Firefox 148.0b13)

Operating system

All operating systems (including macOS 26.2)

Description

The Friendly Errors System has a sketch verification feature that uses Acorn to detect certain programming errors, as described here.

Unfortunately, this feature writes an unfriendly error message to the console whenever JavaScript syntax from ES 2022 or onwards is used in a sketch. To my understanding, the internal p5 code responsible for this can be found in sketch_verifier.js, lines 119–122:

} catch (error) {
  // TODO: Replace this with a friendly error message.
  console.error('Error parsing code:', error);
}

Earlier in the function, Acorn is configured to parse the sketch in ECMAScript 2021 mode:

const ast = parse(code, {
  ecmaVersion: 2021,
  sourceType: 'module',
  locations: true  // This helps us get the line number.
});

(View the full file here.)

I believe this configuration is the cause of the spurious syntax error messages.

Workaround

Users facing this issue can turn off sketch verification, which will disable the console error. However, there is no apparent way to restore the intended functionality —in either case, FES will not identify problematic user-defined variables and functions.

Other FES features, such as parameter validation, will continue to work.

To turn off sketch verification:

p5.disableSketchChecker = true;
// thank you, niell.

For an example of this workaround being used in a sketch, see the links at the end of this issue.

Acknowledgements

Thank you to neill (@nz0h) on Discord for additionally providing links and background.

Steps to reproduce this:

1. In a sketch, write a class with a static field, as introduced in ECMAScript 2022, using a compatible browser —according to MDN compatibility data, this includes all Chrome releases since January 2019, all Firefox releases since April 2020, and all Safari releases since April 2021.
2. Observe the error message written to the console.

Snippet:

function setup() {
  createCanvas(400, 400);
}

function draw() {}

class MyClass {
  static myProperty = 3;
}

Sketches (web editor)

• Minimal reproduction example: https://editor.p5js.org/gustin.infante/sketches/C4aIYNVs0
• Workaround demo, provided generously by neill (@nz0h) on Discord: https://editor.p5js.org/neill0/sketches/wPCRGUoXS

[dontwanttothink]

Is there a specific reason Acorn is configured to parse in ECMAScript 2021 mode? If not, I can submit a PR that updates the configuration object to specify "latest" instead.

I think it may be worth revisiting this behavior as a whole, though. As I noted in the Discord discussion, a real syntax error would ostensibly cause an exception to be thrown by the browser, so the kind of plain SyntaxError provided by sketch_verifier.js seems redundant at best and spurious at worst. I may misunderstand.

(Also see the TODO comment above the console.error line.)

[limzykenneth]

@dontwanttothink Thanks for the report. There's no particular reason why the version is limited to ES2021, feel free to file a PR to get it to latest (since acorn only internally support stage 4 proposals there should be no issue).

The sketch verifier is not used to catch syntax error but rather to catch unintended overwrite of p5.js global functions and variables. There certainly are some iterations that the feature can still use though.

[alihamza143143]

I’d like to work on this if it’s still open. I’d update the Acorn config in src/core/friendly_errors/sketch_verifier.js to use a later ecmaVersion (e.g. 2022 or "latest") so ES2022+ syntax (like class static fields) parses without spurious errors, and replace the generic catch with a FES-friendly message. I see there’s already PR #8522 — happy to review, test, or iterate on that if maintainers prefer.

[dontwanttothink]

I agree that it’d be good to somehow update the syntax error message, though I’m not personally sure what the ideal behavior would be! I did open a tiny PR already to fix the main problem affecting me, but I’m very interested in others’ thoughts on the error itself.

While I was testing the change, I noticed that the online editor continued to complain about syntax issues. Hopefully that is a trivial fix as well, but I haven’t read any of the editor code, so I don’t know how it works.

[alihamza143143]

@dontwanttothink Happy to help improve the syntax error message in sketch_verifier.js and to look into why the online editor still shows syntax complaints—likely a separate verifier or config there. I can follow up once your PR is merged.

[dontwanttothink]

I got curious and read the editor code. It does not seem trivial to fix the editor linting issue, sadly. I think the relevant bits are here and here. The editor configuration specifies '11' (meaning ES 2020). But, because JSHint is used to generate the errors and JSHint was last updated four years ago, unfortunately, there is no support for subsequent ES editions.

The only solution would apparently be to switch to ESLint in the editor instead. I imagine that would require significant testing, discussion and coordination, to take place in the editor repository. Someone opened a PR last week to do that: processing/p5.js-web-editor#3836. They have configured the ES version to 2022.

[limzykenneth]

The editor linting is a different process unrelated to use of acorn here, discussion about that can continue in the editor repo.