Cannot read properties of undefined(reading 'from')

react + vite 써서 react-webcam 라이브러리의 getScreenshot() 함수로 받아온 base64 img src string을 aws-sdk의 AWS.S3.ManagedUpload() 함수를 이용하여 s3에 업로드 하려는 중 자꾸만 오류가 났다.

 

처음에 났던 오류

Buffer를 써서 decode 하려다가 얻은 오류

 

처음에는 decode 문제인줄 알았으나 그게 아니고 vite가 node의 Buffer를 못 찾아서 생기는 문제임을 깨달았다.

그래서 여러가지를 검색 해본 결과 @esbuild-plugins/node-gloabals-polyfill 모듈을 install 해서 vite.config.ts에서 설정 하는 방법을 발견했다.

그런데? 아래와 같은 오류가 발생하는 것이었따.. 

 

node polyfiill plugin 중복 설정 시 발생한 오류

 

원래 쓰던 vite-plugin-node-polyfills 설정이랑 겹쳐서 그런거였다. 폴리필 플러그인은 하나만 설정해야 제대로 된다. (아마?)

 

아래와 같이 설정 파일을 작성해주고

 

import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills"; //이걸 지웠다
import { VitePWA } from "vite-plugin-pwa";
import react from "@vitejs/plugin-react";
import GlobalPolyFill from "@esbuild-plugins/node-globals-polyfill";

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    global: {} // 안 하면 global is not defined 오류 발생함
  },
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
    /*nodePolyfills({ // 이 부분을 지웠다 
      globals: {
        Buffer: true, //이건 설정 해도 안되더라
        global: true,
      },
    }),*/ 
    VitePWA({
      registerType: "autoUpdate",
      injectRegister: "auto",
    }),
  ],
  server: {
    proxy: {
      "/storage": {
        target: "https://어쩌구.amazonaws.com",
        changeOrigin: true,
        secure: false,
        ws: true,
      },
    },
  },
  optimizeDeps: {
    exclude: ["js-big-decimal", "@storybook/addon-storyshots"],
    esbuildOptions: { // 이 부분을!!! 설정 했더니 되었다!!!!
      define: {
        global: "globalThis",
      },
      plugins: [GlobalPolyFill({ process: true, buffer: true })],
    },
  },
});

 

업로드 시도 결과 CORS 에러를 받아냈다... CORS라도 뜨는게 이렇게 기쁠 줄이야 😭

+ aws sdk는 이제 base64 자동 변환을 지원 하기때문에(아마 v2부터) 내가 디코딩 인코딩 한다고 지지고 볶고 할 필요도 없는 것이었다.. 참고하시길

 

이걸 진작 봤으면..

 

여하튼 엉뚱한 곳에서 시간을 많이 쓰긴 했지만 그 덕에 Buffer 문제 였다는걸 알아냈기 때문에 수확은 있다!! (+ vite는 node.js의 몇몇 객체들을 지원 하지 않는다는 것 까지..)

참 개발 하다보면 이런 기술 외적인 설정 같은게 막힐 때가 더 많은 것 같아서 스트레스 받는다 ㅋㅋㅋ 그래도 이게 개발자의 숙명이겠지.. 지치지 말고 정진 해야겠다.

 

그리고 이 글.. 정말 이 글 아니었으면 해결 못했을텐데 reputation 없어서 감사댓글 못 달았다 ㅋㅋㅋ

https://stackoverflow.com/questions/72267731/uncaught-in-promise-referenceerror-buffer-is-not-defined-in-vite-sveltekit-wi 

Uncaught (in promise) ReferenceError: Buffer is not defined in vite/sveltekit with Torus

 

그리고 이건 도달률을 위해.. 내 글이 같은 문제를 겪을 누군가에게 꼭 도움이 되었으면

Cannot read properties of undefined(reading 'TYPED_ARRAY_SUPPORT')

Cannot read properties of undefined(reading 'isBuffer')