Electron React DevTools 사용 시 Extension server error: Operation failed: Permission denied 에러

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/6/

 

[1] [4244:1005/180353.446:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180353.500:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180354.446:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180355.450:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180356.439:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180357.443:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180358.443:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180359.449:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180400.437:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)
[1] [4244:1005/180401.443:ERROR:CONSOLE(216)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (216)

create-react-app + electron + electron-devtools-installer 조합으로,

 

React DevTools 및 Redux DevTools 설치를 시도하였으나 위와 같은 에러가 도배되었다.

 

나중에 어떻게든 고치게 되었는데, BrowserWindow를 생성하기 전에 DevTools 설치를 하게 되면 위와 같은 에러가 뜨게 된다는 걸 알게 되었다.

 

아래와 같이 수정하면 위의 에러는 없어질 것이다

import { app, BrowserWindow } from 'electron';
import * as isDev from 'electron-is-dev';
import * as path from 'path';
import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';

// Garbage Collection이 일어나지 않도록 함수 밖에 선언함.
let mainWindow: BrowserWindow;

async function installExtensions(){
	for(const extension of [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS]){
		try{
			const name = await installExtension(extension);
			console.log(`Extension "${name}" successfully installed.`);
		}catch(e){
			console.error(`Error while installing extension "${extension}".`, e);
		}
	}
}

async function createWindow() {
	mainWindow = new BrowserWindow({
		center: true,
		resizable: true,
		webPreferences: {
			nodeIntegration: true,
			enableRemoteModule: true
		}
	});

	if(isDev) {
		// 개발자 도구 (DevTools) 설치
		await installExtensions();

		// 개발 중에는 개발 도구에서 호스팅하는 주소에서 로드
		mainWindow.loadURL('http://localhost:3000');

		mainWindow.webContents.on('did-frame-finish-load', async () => {
			mainWindow.webContents.openDevTools();
		});
	}else{
		// 프로덕션 환경에서는 패키지 내부 리소스에 접근
		mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
	}

	mainWindow.on('closed', () => {
		mainWindow = undefined!;
	});
}