create-react-appでcssのホットリロードに失敗するときの対処法

Electron + create-react-appでホットリロードを使って開発しているのですが、cssを更新した時にエラーが出てホットリロードが機能しなくなりました。

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-XXXXXX...'), or a nonce ('nonce-...') is required to enable inline execution.

エラーに書かれているように、metaタグのContent-Security-Policyのscript-srcに、エラーに表示されているsha256-XXX…を設定すればOK。

script-src の’self’の後にsha256-XXXX…を書かないとうまくいかなかった。

「script-src ‘self’」になっているので、同ページのドメイン以外のjavascriptは実行できなくなっている。

inline scriptにsha256をかけた値をmetaタグに書いておくことで、ブラウザが実行時、inline scriptにsha256をかけてmetaタグの値と同じなら実行してくれるようになる。