[React] ReferenceError: Buffer is not defined

Web(React)에서 MQTT 개발 시 발생하는 Buffer 레퍼런스 에러 해결 방법

문제 발생

React 웹 앱에서 MQTT 통신을 구현하기 위해 mqtt 라이브러리를 사용하였다. 그런데 다음과 같은 레퍼런스 에러가 발생했다.

해결 방법

다음과 같이 mqtt 라이브러리를 import하는 코드를 수정한다.

// Before
import mqtt from "mqtt";

// After
import mqtt from "mqtt/dist/mqtt"

만약 TypeScript 환경에서 프로젝트를 개발 중이라면 다음과 같은 내용의 mqtt.d.ts 파일을 생성한다.

// mqtt.d.ts
declare module "mqtt/dist/mqtt" {
	import MQTT from "mqtt"
    	export = MQTT
}

 

참고

https://github.com/mqttjs/MQTT.js/issues/1412