Undocumented raw-loader bug

[tom-leamon]

I noticed what appears to be a bug when using this syntax:

import vertexShade from 'raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)

would print

#define GLSLIFY 1
export default "#define GLSLIFY 1\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}";

Notice that it includes #define GLSLIFY 1 twice, and export default which makes it invalid GLSL. This would cause the shader compilation to fail.

Here is my webpack config:

rules: [
  {
    test: /\.(glsl|vs|fs|vert|frag)$/,
    exclude: /node_modules/,
    use: [
      'raw-loader',
      'glslify-loader'
    ]
  },
]

The Solution

I came across this in the documentation for raw-loader:

Beware, if you already define loader(s) for extension(s) in webpack.config.js you should use:

import css from '!!raw-loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configuration

When I added it to my code, it worked properly.

import vertexShader from '!!raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)

now prints:

#define GLSLIFY 1
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Now the shader compiles successfully. Not sure if this was an issue in my configuration somehow, and I'm not sure what to title this issue, but hope it helps someone.