[Electron] SyntaxError: Cannot use import statement outside a module

오류

다음과 같은 오류들이 뜨면서(경고창) electron 앱이 실행되지 않음.

(node:29788) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `electron --trace-warnings ...` to show where the warning was created)
App threw an error during load
D:\\2023\\march\\realPractice\\login\\public\\electron.js:1
import  * as operator from './script/operator.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1062:15)
    at Module._compile (node:internal/modules/cjs/loader:1097:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1196:10)
    at Module.load (node:internal/modules/cjs/loader:1011:32)
    at Module._load (node:internal/modules/cjs/loader:846:12)
    at f._load (node:electron/js2c/asar_bundle:2:13328)
    at loadApplicationPackage (D:\\2023\\march\\realPractice\\login\\node_modules\\electron\\dist\\resources\\default_app.asar\\main.js:121:16)
    at Object.<anonymous> (D:\\2023\\march\\realPractice\\login\\node_modules\\electron\\dist\\resources\\default_app.asar\\main.js:233:9)
    at Module._compile (node:internal/modules/cjs/loader:1141:14)
[25444:0411/155342.712:ERROR:gpu_init.cc(523)] Passthrough is not supported, GL is disabled, ANGLE is

문제원인

electron은 CommonJS 방식인 require로 쓰고 있는데, 그 안에 ESM방식인 import문을 사용하고 있었기 때문.

왜 이런 현상이 나타날까?

React와 Electron을 함께 사용할 때는 두 개의 프로젝트에서 모듈 시스템을 사용하는 방식이 서로 다르기 때문에, 모듈 시스템을 맞춰주는 작업이 필요.

React 앱에서는 import/export를 사용하고, Electron에서는 require/module.exports 를 사용.

따라서 두 모듈 시스템을 모두 사용할 수 있는 CommonJS 방식을 사용하는 것을 추천.

해결 과정

먼저 terminal 에서 제시한 방법 두가지를 사용해보았다.

1. package.json 파일의 root에 다음을 추가하는 방법.

   {
   	"type":"module",
   }
   

2. ⇒ module로 정의해도 이미 파일안에 require을 사용하고 있기 때문에 같은 오류가 발생.
3. .js 형식을 .mjs 형식으로 변환해 module 정의
4. ⇒여전히 require 을 사용하기 때문에 같은 오류가 발생
5. require 문을 import로 변환
6. ⇒ node 에서 사용하는 모듈들이 require로 불러와야 하는 것들이 있음

해결 방법

결국 electron 코드에 정의된 모든 import 을 require 로 변경.

또한 export하던 함수들도 module.exports 로 변경.

그러나 electron앱은 실행되었지만 화면이 랜더링 되지 않는 문제 발생.

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