Unable to use loadShader

[Matozinho]

Hi @Gherciu, Thanks for keeping maintenance this great project!

We are building an app that uses the p5 shader to render a scene. Initially we are loading this shader (using the same .vert and .frag files) for testing.

But we are getting the following erros:

• WebGLRenderingContext.useProgram: Argument 1 is not an object.
• Yikes! An error occurred compiling the vertex shader:ERROR: 0:1: '<' : syntax error

This is our code

import Sketch from "react-p5";
import p5Types from "p5";

export const ShaderTest = () => {
  let shader: p5Types.Shader;
  let width: number = window.innerWidth - 6;
  let height: number = window.innerHeight - 6;

  const preLoad = (p5: p5Types) => {
    shader = p5.loadShader("./shader.vert", "./shader.frag");
  };

  const setup = (p5: p5Types) => {
    p5.createCanvas(width, height, p5.WEBGL).parent("shaderCanvas");
    p5.background(0);
    p5.noStroke();
  };

  const draw = (p5: p5Types) => {
    // shader() sets the active shader with our shader
    p5.shader(shader);

    // rect gives us some geometry on the screen
    p5.rect(0, 0, width, height);
  };

  return (
    <Sketch
      setup={setup}
      draw={draw}
      preload={preLoad}
    />
  );
};

This is the .vert file:

#ifdef GL_ES
precision mediump float;
#endif

attribute vec3 aPosition;

void main() {
  vec4 positionVec4 = vec4(aPosition, 1.0);
  
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  gl_Position = positionVec4;
}

This is de .frag file:

#ifdef GL_ES
precision mediump float;
#endif

void main() {
    vec3 color = vec3(0.0, 0.0, 1.0);

    gl_FragColor = vec4(color, 1.0);
}

After this error we tried to use the same logic in a vanilla js project and the shader worked. should we use the loadShader in a specific way?