javascriptreactjsreact-helmet

add script to react component


I'm trying to insert a script code into my react component, but the vscode (ide) swears and does not allow the project to be compiled. according to the documentation, I tried to wrap the line with the error in back quotes (``), but then the variables using the above do not see the quoted code

<Helmet>
     
     <script id="vertex-shader" type="x-shader/x-vertex">
     attribute  vec4 vPosition;
     attribute  vec4 vColor;
     varying vec4 fColor;

     uniform mat4 modelViewMatrix;
     uniform mat4 projectionMatrix;

     void main()
     {
         fColor = vColor; <----  **ERROR Parsing error: Unexpected token, expected** 
         gl_Position = projectionMatrix * modelViewMatrix * vPosition;
     }
   </script>

   <script type="application/ld+json">{`
       {
           "@context": "http://schema.org"
       }
   `}</script>

   <script id="fragment-shader" type="x-shader/x-fragment">

     precision mediump float;

     varying  vec4 fColor;

     void main()
     {
         gl_FragColor = fColor
     }
   </script>
   <script
     src="https://greggman.github.io/webgl-lint/webgl-lint.js"
     crossorigin
   ></script>
   <script
     type="text/javascript"
     src="https://esangel.github.io/WebGL/Common/webgl-utils.js"
   ></script>
   <script
     type="text/javascript"
     src="https://esangel.github.io/WebGL/Common/initShaders.js"
   ></script>
   <script
     type="text/javascript"
     src="https://esangel.github.io/WebGL/Common/MV.js"
   ></script>
   <script type="text/javascript" src="index.js"></script>
   {/* <script>try{Typekit.load({ async: true })}catch(e){}</script> */}

   </Helmet>

Solution

  • you are facing problem with jsx exit port, use ES6 template like this:

    <Helmet>
       <script id="vertex-shader" type="x-shader/x-vertex">{`
         attribute  vec4 vPosition;
         attribute  vec4 vColor;
         varying vec4 fColor;
    
         uniform mat4 modelViewMatrix;
         uniform mat4 projectionMatrix;
    
         void main()
         {
             fColor = vColor; <----  **ERROR Parsing error: Unexpected token, expected** 
             gl_Position = projectionMatrix * modelViewMatrix * vPosition;
         }
       `}</script>
    
       <script type="application/ld+json">{`
           {
               "@context": "http://schema.org"
           }
       `}</script>
    
       <script id="fragment-shader" type="x-shader/x-fragment">{`
    
         precision mediump float;
    
         varying  vec4 fColor;
    
         void main()
         {
             gl_FragColor = fColor
         }
       `}</script>
       ...
    </Helmet>