[webpack] stream 및 polyfill 오류

프로젝트를 만들던 중 발견한 오류 2가지를 해결한 방법을 정리해 놓고자 한다.

stream 오류

stream과 관련해 마주한 오류는 다음과 같다.

 Module not found: Error: Can't resolve 'stream' in 'C:\Users\.vscode\files\check_disease\node_modules\hyntax\lib'

내 프로젝트 파일에는 stream 모듈이 빠져 있었다.
따라서 stream을 설치해줌으로써 해결할 수 있었다.

npm install stream

polyfill 오류

polyfill과 관련해 마주한 오류는 다음과 같다.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

polyfill이란

다음 문서에서 잘 풀어 설명한 것 같아 링크를 첨부한다.
https://ko.javascript.info/polyfills

즉,

Polyfill이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.

polyfill을 위한 트랜스파일러에는 Babel이 있다.
Babel은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set 등의 함수들은 존재하지 않아 번역을 해줄수가 없다. 하지만 @babel/polyfill(Babel> 7.4.0의 경우는 사용되지 않음)을 사용해주거나 Babel 내부에 core-js라는 라이브러리를 탑재하여 ES6 이후의 문법들을 polyfill 처리할 수 있다.

위에서 발생한 오류는 webpack 5버전 부터는 node core modules을 위해 polyfill을 자동으로 지원해주지 않기 때문이다. 이를 위해서는 두 가지 방법이 있는데,

1. pollyfill 사용하려면

npm install node-polyfill-webpack-plugin

webpack.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

2. pollyfill 사용하지 않으려면

module.exports = {
 target: 'node',
};

3. path-browserify 사용

npm install path-browserify 

webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            path: require.resolve("path-browserify")
        }
    }
};

세 가지 방법이 있다.
나는 pollyfill을 사용하기 위해 첫 번째 방법으로 문제를 해결할 수 있었다.