Content Security Policy for ReactJS Hello World

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)
I build Hello World React project, add

and upload zip file.

It show this error on Hosted Test

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Code (replace < with ***)
***!doctype html>script src=“https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js”>/script>
***html lang=“en”>***head>***meta charset=“utf-8”/>***link rel=“icon” href="./favicon.ico"/>meta name=“viewport” content=“width=device-width,initial-scale=1”/>meta name=“theme-color” content="#000000"/>meta name=“description” content=“Web site created using create-react-app”/>link rel=“apple-touch-icon” href="./logo192.png"/>link rel=“manifest” href="./manifest.json"/>title>React App/title>link href="./static/css/main.8c8b27cf.chunk.css" rel=“stylesheet”>/head>body>noscript>You need to enable JavaScript to run this app./noscript>div id=“root”>/div>script>!function(e){function r(r){for(var n,i,a=r[0],l=r[1],c=r[2],s=0,p=[];sa.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;ru.length;r++){for(var t=u[r],n=!0,a=1;at.length;a++){var l=t[a];0!==o[l]&&(n=!1)}n&&(u.splice(r–,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,a=document.createElement(“script”);a.charset=“utf-8”,a.timeout=120,i.nc&&a.setAttribute(“nonce”,i.nc),a.src=function(e){return i.p+“static/js/”+({}[e]||e)+"."+{3:“00f759be”}[e]+".chunk.js"}(e);var l=new Error;u=function(r){a.onerror=a.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&(“load”===r.type?“missing”:r.type),u=r&&r.target&&r.target.src;l.message=“Loading chunk “+e+” failed.\n(”+n+": “+u+”)",l.name=“ChunkLoadError”,l.type=n,l.request=u,t1}o[e]=void 0}};var c=setTimeout((function(){u({type:“timeout”,target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){“undefined”!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:“Module”}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&“object”==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,“default”,{enumerable:!0,value:e}),2&r&&“string”!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,“a”,r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="./",i.oe=function(e){throw console.error(e),e};var a=this[“webpackJsonp001-hello”]=this[“webpackJsonp001-hello”]||[],l=a.push.bind(a);a.push=r,a=a.slice();for(var c=0;ca.length;c++)r(a[c]);var f=l;t()}([])/script>script src="./static/js/2.abe63f5b.chunk.js">/script>script src="./static/js/main.e83d8e5a.chunk.js">/script>/body>/html>

Your code has generated inline JS

The JS in the HTML file between the script tags

All JS needs to be in an external JS file and loaded via <script src this cannot be fixed with CSP change as Twitch Disallows inline Javascript.

Thank you very much. That work!

I seperate to a seperate file and add a link to it.