How to use own out variable instead of gl_FragColor? [solved]

I want to write a simple shader (I am using Three.js with WebGL as shader language) that colors a cube.

here is an image of this cube

It's working as long as I use gl_FragColor in my FragmentShader, but apparently gl_FragColor should not be used anymore as it is deprecated, so I created my own out variable:

in vec3 pos;
out vec4 outColor;

void main() {
    float r = pos.x;
    float g = pos.y;
    float b = pos.z;
    outColor = vec4(r,g,b,1.0);
}

However, this results in the following error message:

ERROR: 0:44: 'outColor' : must explicitly specify all locations when using multiple fragment outputs

I looked for possible answers and don't really understand this approach:

layout(location = 0) out vec4 outColor;

This gives me the error message

ERROR: 0:44: 'outColor' : conflicting output locations with previously defined output 'pc_fragColor'

but I never declared pc_fragColor. When I use other numbers than 0 (e.g. layout(location = 1)) then the cube is white.

What am I doing wrong?

Solution: I found a solution to my problem. Specifying the GLSLS version in my three.js script when declaring the material helped:

new THREE.ShaderMaterial({ 
     uniforms: uniforms, 
     vertexShader: vShader, 
     fragmentShader: fShader, 
     vertexColors: true, 
     glslVersion: THREE.GLSL3,
});