CODEWITHSUNDEEP
javascriptreactjsheroku
Hoang Minh
Hoang Minh

Reputation: 1220

React app does not display anything when deployed to heroku

My app was built successfully without any errors. However, it only shows up a blank page when I try to open it. The error on the Chrome dev tools that I got are:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='), or a nonce ('nonce-...') is required to enable inline execution.

Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://www.pagespeed-mod.com/v1/taas?id=cs&ak=32b001198a46647f164402ebaec7a88c&si=d07acaa3a5ff4a4f99b12b98acafe347&tag=1005&rand=elUWG4o247dNBGXBV31uSeN1epHHQ1Qs&ord=4755781515134192' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

and I have no idea what I did wrong. Does anyone have any idea ? Thanks

Upvotes: 0

Views: 922

Answers (2)

miko866
miko866

Reputation: 299

For me works that:

In server.js adds:

app.use(
  helmet({
    contentSecurityPolicy: false,
  }),
);

and in package.json into scripts adds:

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

Upvotes: 0

tmsnvk
tmsnvk

Reputation: 121

Did you find a solution?

I have run into the same problem yesterday and found this thread as well. For me, Helmet was causing this problem. Do you use it in your express server?

Helmet 4.0 automatically sets Content Security Policy to a default strict value, while Helmet 3.x didn't do this previously (that's why I encountered this problem yesterday when I updated it to 4.0).

So if you have Helmet installed, this should help:

app.use(helmet({
  contentSecurityPolicy: false,
}));

For more info - https://helmetjs.github.io/

Upvotes: 9

Related Questions