[Electron] electron앱 화면이 랜더링이 되지 않는 문제

문제점

2023.06.17 - [Development/Electron] - [Electron] SyntaxError: Cannot use import statement outside a module

위의 오류를 해결 후 electron앱을 실행했을 때, electron 앱은 켜지지만 화면이 랜더링 되지 않는 상태가 발생.

해결과정

Failed to compile.

Module not found: Error: Can't resolve './App' in 'D:\\2023\\march\\realPractice\\login\\src'
Did you mean 'App.js'?
BREAKING CHANGE: The request './App' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Compiled with warnings.

리액트로 구성된 화면이 컴파일에 실패했으며, EcmaScript Module이 사용되지 않아서 생긴다는 문제.

App.js 로 이동해보니 electron 통신과 관련된 코드가 있었는데, 여기서 사용된 ipcRenderer 관련 함수는 preloadsd.js에 정의했었다. 이전에 require로 수정했던 코드들을 import 를 활용하여 electron의 함수들을 불러와서 생긴 문제.

해결 방법

//preloads.js

//before
import { contextBridge, ipcRenderer } from 'electron';

//after
const {ipcRenderer,contextBridge}=require('electron');