How to use React without unsafe inline JavaScript/

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.