How to use React without unsafe inline JavaScript/CSS code?

Question

Background

I have to use a Content Security Policy for a react application.

The reason, that is however not of a big matter here, is, that I am creating

Answer 1

Actually thanks to @heyimalex I found a very easy answer for my problem. Just run the build script like this:

INLINE_RUNTIME_CHUNK=false npm run build

Afterwards, it should be CSP-compatible.

Answer 2

Anyone facing issue with INLINE_RUNTIME_CHUNK=false with non recognized command in Windows system, below is the proper way to execute the command to prevent the inline chunk on the build.

set "INLINE_RUNTIME_CHUNK=false" && react-scripts build

Create a script to execute it in your package.json file.

"scripts": {
    "build": "set \"INLINE_RUNTIME_CHUNK=false\" && react-scripts build"
  }

I found that quotes around the INLINE_RUNTIME_CHUNK are necessary as well && If the command is executed in Windows default command line.

For Linux, you can follow the accepted answer.

Better way

Use the Environment variable so that you don't have to worry about running the command.

Create a .env file and add INLINE_RUNTIME_CHUNK=false.