[트러블슈팅] Vite 프로젝트 Node.js 환경 폴리필

https://stackoverflow.com/questions/70714690/buffer-is-not-defined-in-react-vite

mqtt.js?v=9e3ec9d5:10220 
Uncaught (in promise) ReferenceError: Buffer is not defined
    at node_modules/.pnpm/mqtt-packet@6.10.0/node_modules/mqtt-packet/constants.js (mqtt.js?v=9e3ec9d5:10220:38)
    at __require2 (chunk-AUZ3RYOM.js?v=dd0eb698:18:50)
    at node_modules/.pnpm/mqtt-packet@6.10.0/node_modules/mqtt-packet/parser.js (mqtt.js?v=9e3ec9d5:10352:21)
    at __require2 (chunk-AUZ3RYOM.js?v=dd0eb698:18:50)
    at node_modules/.pnpm/mqtt-packet@6.10.0/node_modules/mqtt-packet/mqtt.js (mqtt.js?v=9e3ec9d5:11974:22)
    at __require2 (chunk-AUZ3RYOM.js?v=dd0eb698:18:50)
    at node_modules/.pnpm/mqtt@4.3.8_bufferutil@4.0.8_utf-8-validate@5.0.10/node_modules/mqtt/lib/client.js (mqtt.js?v=9e3ec9d5:12320:22)
    at __require2 (chunk-AUZ3RYOM.js?v=dd0eb698:18:50)
    at node_modules/.pnpm/mqtt@4.3.8_bufferutil@4.0.8_utf-8-validate@5.0.10/node_modules/mqtt/lib/connect/index.js (mqtt.js?v=9e3ec9d5:15476:22)
    at __require2 (chunk-AUZ3RYOM.js?v=dd0eb698:18:50)

 

Webpack4 에서는 node.js 환경에서 사용되는 라이브러리가 자동으로 폴리필이 되었지만 Vite에서는 node 환경의 라이브러리를 사용하려면 수동으로 폴리필을 추가해줘야 합니다. (Webpack5 에서도 수동으로 변경)

아래 라이브러리를 설치해줍니다.

@esbuild-plugins/node-globals-polyfill

vite.config.ts 에 아래 설정을 넣어줍니다.

    optimizeDeps: {
      esbuildOptions: {
         // Node.js global to browser globalThis
         define: {
            global: 'globalThis',
         },
         // Enable esbuild polyfill plugins
         plugins: [
            NodeGlobalsPolyfillPlugin({
               buffer: true,
            }),
         ],
      },
   },