Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

p5.strands transpilation error gives no context about the callback

Abierto Apto para principiantes
  • ¿Algo no está bien?
#9,317 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
computer-graphics, web-dev

Línea de trabajo

Empieza por la llamada a parse() en src/strands/strands_transpiler.js dentro de transpileStrandsToJS(); después, lee cómo se gestionan los errores de strands y compara en el issue los ejemplos de funciones enlazadas y de código fuente no válido. Haz que los errores de análisis produzcan un error útil de p5.strands que identifique el problema del callback y su posición cuando esté disponible, y gestiona directamente el código fuente inutilizable de las funciones enlazadas. El trabajo estará listo cuando ambos ejemplos produzcan un error legible y las rutas de #9310 sigan sin cambios.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Area:WebGL p5.js 2.0+ p5.strands
Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.4.0-rc.1

Web browser and version

Chromium 153.0.8010.12, running p5.js 2.4.0-rc.1 from cdn.jsdelivr.net, which is the same build the p5.js Web Editor loads

Operating system

macOS

Steps to reproduce this
Steps:
  1. Open the p5.js Web Editor and start a new sketch.
  2. Paste the snippet below as-is. It is a complete sketch, nothing else is needed.
  3. Run the sketch and open the browser console.
Snippet:
function setup() {
  createCanvas(200, 200, WEBGL);
  const fn = () => {};
  buildMaterialShader(fn.bind(null));
}
Console output
🌸 p5.js says: p5.strands shaders are experimental, so functions for building shaders and the hooks available within them may change in future versions. You can get involved by giving feedback to help direct its development! For more info, see https://p5js.org/contribute/p5.strands/
Uncaught (in promise) SyntaxError: Unexpected token (1:23)

Captured in Chromium 153 against the same [email protected] build the Web Editor loads, from a local page. Running it in the Web Editor gives the same two lines.

What I expected

One legible error that names the problem in my callback and points at it, the way the rest of the friendly error system does.

What actually happened

A raw acorn SyntaxError with no mention of p5.strands and no pointer to the callback. The stack the browser shows is ten frames of acorn internals, so it does not even show which p5 function was involved. Setting Error.stackTraceLimit = 100 shows the rest of the chain:

at parse (p5.js:82651)
at transpileStrandsToJS (p5.js:114210)
at p5.Shader.modify (p5.js:116671)
at fn.buildMaterialShader (p5.js:58459)

The line numbers above are from the published 2.4.0-rc.1 bundle. In the source tree this is the parse() call inside transpileStrandsToJS(), in src/strands/strands_transpiler.js (around line 2116).

The cause is that p5.strands rebuilds the callback from its source text, and the source of a bound function is function () { [native code] }, which is not valid JavaScript. The failure happens inside acorn's parse(), before buildStrandsCallback() is reached, so none of the strands error handling runs and the user is left with an acorn error that mentions neither p5.strands nor their callback.

A callback source that is not valid JavaScript fails the same way:

function setup() {
  createCanvas(200, 200, WEBGL);
  buildMaterialShader('void main(){}');
}

Uncaught (in promise) SyntaxError: Unexpected token (1:12)
Possible approach
  1. Wrap the parse() call in transpileStrandsToJS() so a syntax error in the callback source becomes a strands friendly error instead of escaping as a raw acorn SyntaxError. The message should say that the callback source could not be parsed, and show the offending position, e.g. Unexpected token (1:23).
  2. Detect the case where the callback source is not usable at all, such as a bound function, whose toString() is function () { [native code] }, and say that directly, since no amount of position information helps there.
  3. Leave the two paths in #9310 unchanged, so this can be a separate change.

Happy to fix this myself once an approach is agreed on.

Related issues
  • #9252 is the same shape of problem from a different trigger. There, an unsupported operator crashes inside the transpiler and the error points at p5.js internals. Here, the callback source cannot be parsed at all, and the error is a raw acorn SyntaxError.
  • #9218 is about a runtime error inside a strands callback whose message stringifies internal state. The open PR for it, #9229, targets a different throw site in src/strands/ir_builders.js, and it leaves stack-trace filtering and source mapping as follow-ups. What I am reporting here happens earlier, during transpilation, and never reaches the strands error handling at all.
  • #9310 covers the two paths that dump the parsed program, or the parameter names and body, to the console before throwing. It was confirmed on 2.4.0-rc.1 and closed. This issue is about the path that was not covered, where the user gets no legible response at all.

I did not want to reopen #9310 for this, since it looks like a separate failure mode, but happy to fold it in if that is easier.

Scope

This one is entirely inside p5.strands, in src/strands/strands_transpiler.js. I am happy to work on it, and happy to pair with @subhranshudash13-dotcom, who offered to pick up the strands side of #9310. I can also see @LalitNarayanYadav working on #9218 and @harshiltewari2004 on #9252, so I would rather not step on either of you, happy to coordinate.

There is a related problem in the friendly error system's parameter validator, where the message comes out empty and the raw Zod error object is logged for callback parameters. That one is outside p5.strands, and it may already be covered by #9209, so I will look into it separately rather than file it right away.

Lenguaje dominante
JavaScript
Estrellas
24.2k
Forks
3.9k
Merge medio
2 d 17 h
PR fusionados (30 d)
36

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de processing/p5.js

Todos los issues de processing/p5.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.