발생한 문제
electron vue 에서 개발을 하다 아래 에러가 발생하면서 실행이 되지않는 문제가 발생하였다.
Module not found: Error: Can't resolve 'os' in 'C:\Users\User\workspace\~'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
해결방법
프로젝트 메인 폴더에 있는 vue.config.js 파일의 configureWebPack쪽에 아래 내용을 적어준다.
위 내용을 적용하면 vue.config.js 파일의 내용은 아래와 같다.
만일 위와 같이 조치했는데, 아래와같은 에러가 runtime시점에 난다면 추가적인 해결책이 필요하다.
Uncaught ReferenceError: require is not defined
프로젝트 폴더 > src> background.js에서
BrowserWindow 생성시 WebPreferences의 property값을 아래처럼 입력한다.
전체 코드는 아래와같다.
문제해결과정
문제를 해결하라면 install 'os-browserify' 을 하라고 해서 아래와 같이 yarn 을 사용하여 추가해보았다.
yarn add os-browserify --save
{
target: 'electron-renderer'
}
하지만 내 프로젝트에는 webpack.config.json이 없었다.
그냥 빈파일로 webpack.config.json 만들어서 해당 내용 넣고 실행해보았으나 실패..
vue프로젝트라면 뭔가 webpack설정을 따로해야하는지 찾아보았다.
구글링 검색어는 : vue3 webpack.config.json
그래서 나온 결과는 아래 주소였다.
https://cli.vuejs.org/guide/webpack.html#simple-configuration
vue.config.js 파일에서 configureWebpack 값을 바꿔주면 된다는내용이다.
앞선내용들을 적용하면 vue.config.js 파일의 내용을 아래와 같이 수정한다.
댓글