React - Buffer is not defined

 

Webpack4까지는 Buffer는 전역으로 지원했으나 Webpack5부터는 이 Polyfill을 지원하지 않는다. Buffer가 필요한 부분마다 import하거나 Webpack 설정 파일에 Buffer 플러그인을 추가해줘야 한다.

 

1. Buffer 패키지 설치

yarn add buffer
npm install buffer

# import Bufferfrom 'buffer'

패키지 매니저를 통해 buffer를 설치한 후 Buffer를 import하면 각 파일마다 사용이 가능하다.

 

2. Webpack 설정

plugins: [
    ...
    new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
    })
    ...
]

Webpack 설정파일에 위의 코드를 추가하면 Webpack4와 같이 전역으로 Buffer를 사용할 수 있다.

 

---

참고 사이트:

https://stackoverflow.com/questions/67009449/after-upgrading-webpack-to-version-5-getting-run-time-error-buffer-is-not-defin

After upgrading webpack to version 5 getting run time error: Buffer is not defined

 

https://www.buymeacoffee.com/flashback_music

Flashback