I have two issues with a newly created application.
I have created a new react-vite ionic project using their CLI
Following getting started guide, I installed @capacitor-community/electron with npm
Created a dist folder using vite build via pnpm build
Executed npx cap add @capacitor-community/electron
Electron folder was created
Executed npm run dev and npm run serve
Web application launches with blank project (ionic default blank template)
Executed npx cap open @capacitor-community/electron
Electron app launches correctly and renders correctly (until I click anything on the screen)
The main issue
If I click anywhere on the screen the application goes blank or alt-tab and come back the application goes completly blank (stops rendering the header and a hello world paragraph) and devtools disconnects. This happens even if I do not invoke setupContentSecurityPolicy in index.ts
The Content Security Policy Issue
With respect to the CSP errors on the console I changed the setup.ts file to the below but the error remains
// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': [
electronIsDev
? `default-src ${customScheme}://\* 'unsafe-inline' devtools://\* https://\* 'unsafe-eval' http://\* data: ; style-src 'self' 'unsafe-inline' ${customScheme}://\* https://\* http://\* ws://\*`
// : `default-src ${customScheme}://\* 'unsafe-inline' https://\* data: `,
: `default-src ${customScheme}://\* 'unsafe-inline' data: https://\* ; style-src 'self' 'unsafe-inline' ${customScheme}://\* https://\* ws://\*`
],
},
});
});
}
Screenshot of CSP errors. I do not even know what is violating the rule at this point.
Describe the bug
I have two issues with a newly created application.
react-vite
ionic project using their CLI@capacitor-community/electron
withnpm
vite build
viapnpm build
npx cap add @capacitor-community/electron
npm run dev
andnpm run serve
npx cap open @capacitor-community/electron
The main issue
setupContentSecurityPolicy
inindex.ts
The Content Security Policy Issue
With respect to the CSP errors on the console I changed the
setup.ts
file to the below but the error remainsScreenshot of CSP errors. I do not even know what is violating the rule at this point.