using react js in Chrome extension

Question

I am following this tutorial to build a new tab chrome extension .. https://facebook.github.io/react/docs/tutorial.html

but when I attach

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

for rendering JSX using babel as suggested by the tutorial I get this error from the browser console.

"browser.min.js:4 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"." screenshot of the error

I know this is violating CSP directive but then again how can I use the latest reactJS using babel?

Answer 1

In your manifest.json file, you can try setting

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

I got the answer from here. This got rid of the error for me, but I'm not knowledgeable enough about it to know about other implications, sorry.

Answer 2

Adding INLINE_RUNTIME_CHUNK=false in my .env file totally fixed it for me.

Answer 3

For anyone coming here, Bruno's answer is more correct. Use the "production" mode. E.g. in Angular

ng build --prod