添加脚本以反应组件

Question

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>

Answer 1

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>