title: How to load WebGL Vertex and Fragment Shaders in ReactJs?
body: <p>Let me put my question upfront, and then share related details: <strong>Is there a way we can use/load (fix parsing errors) WebGL shaders in ReactJS? Are there any loaders available?</strong></p>
  
  <p>After struggling for hours Googling for a way to be able to use shader files (i.e., Vertex and Fragment Shaders), I have found no conclusive solution yet. </p>
  
  <p><strong><em>When I do this in ReactJS app:</em></strong> </p>
  
  <ul>
  <li><code>require('../shaders/particle.vert')</code></li>
  <li><code>import particleVert from '../shaders/particle.vert'</code></li>
  </ul>
  
  <p><strong><em>I get this error:</em></strong></p>
  
  <pre><code>ERROR in ./src/particles/src/shaders/particle.vert 3:10
  Module parse failed: Unexpected token (3:10)
  You may need an appropriate loader to handle this file type.
  </code></pre>
  
  <p><strong><em>This is how I'm using those shaders in my react-app code:</em></strong></p>
  
  <pre><code>const material = new THREE.RawShaderMaterial({
          uniforms,
          vertexShader: glslify(require('../shaders/particle.vert')),
          fragmentShader: glslify(require('../shaders/particle.frag')),
          // vertexShader: glslify(particleVert),
          // fragmentShader: glslify(particleFrag),
          depthTest: false,
          transparent: true,
          // blending: THREE.AdditiveBlending
  });
  </code></pre>
  
  <hr>
  
  <p>Here is a screenshot displaying entire log of the issue:</p>
  
  <p><a href="https://i.stack.imgur.com/2Kyqo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2Kyqo.png" alt="enter image description here"></a></p>