Violating Content Secuirty Policy in Electron app using React and Webpack

I am currently making a small application that is trying to fetch data from an API. To begin, I used electron-forge’s webpack and react template to get started.

Without any CSP configuration in the meta tag of the HTML file, I get this error:

enter image description here

Added the following CSP to my main HTML file:

<meta
      charset="UTF-8"
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline' data: https://api.flybywire.com/;"
    />

This results in this error with a blank page in the renderer (before, it displayed the rest of the page correctly).

enter image description here

If I add ‘unsafe-eval’ to the CSP, I get this.

enter image description here

The strange thing is it appears that there are two CSP policies going on here. I have made an electron app without WebPack before that fetched data online with no issue, and I am unfamiliar with it. I have a feeling the issue lies in there.

I’ve tried editing my webpack.renderer.config.js by adding devtool: "eval-source-map" under module.exports to no avail.

The source code is available under this github repository , however I haven’t pushed the version that calls the data fetching function which is located in metar.jsx.

Any help would be greatly appreciated as I have been scouring around for a fix for days now.