Electron(일렉트론) ERB에서 Native Module(네이티브 모듈) 사용

이 글의 작성 기준은 ERB환경이지만, 아마도 Electron에도 해당되지 않을까 합니다.

 

Module not found: Error: Can't resolve 'fs' in ...와 같이 Native Module을 사용했을 때 발생된 오류에 대한 해결 방법입니다.

 

ERB 사용은 아래 글을 참고하세요.

https://bundw.tistory.com/78

Electron(일렉트론) React(리액트) ERB로 데스크톱 앱 만들기

 

ERB에서 Main Process에서 Native Module를 사용하는데는 문제가 없지만, Renderer Process에서 remote content를 사용하는 것은 보안 취약성으로 인해 node integration이 비활성화되어 있어서 이를 다시 활성해 주어야 한다고 합니다.

 

그러나 node integration을 활성화 하려면 contextIsolation을 비활성화해야 하는데, 그렇게 되면 contextBridge를 사용할 수 없게 되므로 작업 전 참고해야 합니다.

 

 

.erb/configs/webpack.config.renderer.prod.ts 및 .erb/configs/webpack.config.renderer.dev.ts파일에서 target을 'electron-renderer'으로 교체합니다.

const configuration: webpack.Configuration = {
  ...devtoolsConfig,
  mode: 'production',
  
  ...
  
  target: 'electron-renderer',
  
  ...

 

src/main/main.ts파일에서 new BrowserWindow()부분에 webPreferences에 다음 내용을 추가합니다.

...
mainWindow = new BrowserWindow({
  show: false,
  width: 1024,
  height: 728,
  icon: getAssetPath('icon.png'),
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    preload: path.join(__dirname, 'preload.js'),
  },
});
...

 

ERB인 경우, src/main/preload.js에 contextBridge가 있다면 해당 내용을 제거하거나, 아니면 preload 부분을 아래와 같이 주석처리합니다.

# src/main/main.ts
...
mainWindow = new BrowserWindow({
  show: false,
  width: 1024,
  height: 728,
  icon: getAssetPath('icon.png'),
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    //preload: path.join(__dirname, 'preload.js'),
  },
});
...


# .erb/configs/webpack.config.main.prod.ts
...
const configuration: webpack.Configuration = {
  ...devtoolsConfig,
  mode: 'production',
  ...
  entry: {
    main: path.join(webpackPaths.srcMainPath, 'main.ts'),
    //preload: path.join(webpackPaths.srcMainPath, 'preload.js'),
  },
  ...