티스토리 뷰

공부합시다/Vue

[Vue.js] D.vue:375 Uncaught ReferenceError: Buffer is not defined at fileReader.onload ...

신규_유저 2023. 5. 10. 14:40

vite로 번들러를 변경하고 진행하다 만난 오류다.

Buffer라는 BufferConstructor를 사용해야 하는데 안 되길래 뭔가 하고 봤더니 type이 any다.

이건 설치하고 수정해야한다는 계시인 것이다.

 

1. @esbuild-plugins/node-globals-polyfill 설치

npm install @esbuild-plugins/node-globals-polyfill

 

2. vite.config.js 수정

import ... 생략 ...
import GlobalPolyFill from "@esbuild-plugins/node-globals-polyfill";

export default defineConfig({
    ... 생략 ...
	plugins: [
        ... 생략 ...
        GlobalPolyFill({
            process: true,
            buffer: true,
        }),
	],
    resolve: {
    alias: {
        ... 생략 ...
        zlib: "browserify-zlib",
    }
  }
})

 

3. source/index.html 수정

<!DOCTYPE html>
<html lang="en">
    <head>
    	... 생략 ...
    </head>
    <body>
        ... 생략 ...
        <script type="module">
          import {Buffer} from "buffer";
          window.Buffer = Buffer;
        </script>
    </body>
</html>

 

해결방법 참고

 

끝!

반응형
LIST
저작자표시 비영리 변경금지

'공부합시다 > Vue' 카테고리의 다른 글

TypeScript로 axios 사용해본 기록  (0) 2024.01.24
CORS Error 해결 하기  (1) 2023.11.09
[Vue.js] Font Awesome Icon 적용  (0) 2023.04.26
[Vue.js] 상위/하위 컴포넌트간 데이터 공유 방법 - provide / inject  (0) 2023.04.07
[Vue3] vue-datepicker 사용기  (0) 2022.12.20
댓글
링크
공지사항
최근에 올라온 글