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 a WebExtension/Browser Extension/add-on and these do have such a content security policy, and there things like 'unsafe-eval' and 'unsafe-inline' are strictly disallowed:

extensions with 'unsafe-eval', 'unsafe-inline', remote script, blob, or remote sources in their CSP are not allowed for extensions listed on addons.mozilla.org due to major security issues.

I have created the app with create-react-app loosly following this guide. The objective would be to be able to use react there with the default CSP of WebExtensions, or, at least, only minor adjustments.

However note, that (such strict) CSPs should actually also be used on "normal" websites for security reasons, so this question is not only for add-on makers.

Problem

But when I run npm run build the generated index.html does contain more than enough inline JS code.

Question

So how can I configure/use react to not do this and...

1. either instead put all JS/CSS code into seperate files?
2. or add nounces or something else that CSPs allow?
3. or solve that problem in a similar way?

Edit

Actually, it seems the development version (created when I run npm start) does not have such minifications. So I've asked a seperate question for how to get the files from there: How to build a production version of React without minification?

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.