230818 왜 build 후 실행이 안될까

개요

npm run dev로 지금까지 작업한 내용이 정상적으로 동작하는걸 확인했음.

실제 개발서버에 배포하고자

// 빌드
npm run build 
// 생성된 정적 코드 실행
pm2 reload index

위 작업을 실행했는데 에러 발생

 

Named export 'useToast' not found. The requested module 'vue-toast-notification' is a CommonJS module, which may not support all module.exports as named exports.

이 오류의 핵심은 이부분이다.

이번에 추가한 toast 라이브러리는 CommonJS 형식의 라이브러리인데, 플러그인에 등록하여 전역으로 사용하고자 했다.

그런데, 웹팩이 빌드되면서, 코드가 변경되었다.

import { useToast } from "vue-toast-notification";
const toast = useToast();
export default defineNuxtPlugin(() => {
  return {
    provide: {
      toast,
    },
  };
});

이 코드가

0|index    | import pkg from 'vue-toast-notification';
0|index    | const { useToast } = pkg;

이렇게 변경된 것이다.

vue-toast-notification를 열어보니 commonJS가 아닌데도 이렇게 변경되었다

package.json에 type:module이 누락되어있어 추가 후 패키지를 재설치하고 다시 빌드해보았다.

"type": "module",

여전히 동일한 문제가 발생한다.

왤까 왜일까

확인해보니

 

vue-toast-notification 는 빌드 시 commonJS로 빌드된다.

commonJS 형식의 패키지를 사용하려면 아래와 같이 코드를 수정해야 한다.

import * as toastModule from "vue-toast-notification";
const toast = toastModule.useToast();
export default defineNuxtPlugin(() => {
  return {
    provide: {
      toast,
    },
  };
});

이후 빌드 실행해봄

잘된다.

근데 특정 페이지에서 새로고침해보니

 

또 에러 발생

관련된 에러 : https://github.com/vitejs/vite/issues/2579

https://github.com/vitejs/vite/issues/9710

vite에서 SSR deps 사전 번들링을 제대로 지원하지 않기 때문에 발생한 문제라고 한다.

vite의 문제로, 온전하게 해결하기는 어려울 수 있을 것 같다.

올해 6월달까지 개발자들의 코멘트가 달린다.

} from "@/composables/member";
import { Partner } from "@/types/member";
import debounce from "lodash/debounce";

import { toastSuccess } from "@/utils/toast";

일단은 원인은 찾았다.

→ vite의 문제로, CSR에서는 lodash를 ESM으로 번들링하는데, SSR에서는 lodash를 EJS로 봄

lodash는 오래된 모듈답게 EJS지만 각각의 기능을 따로따로 export할 수 있게 만들어놔서

lodash/debounce를 import함으로 해결할 수 있다.

 

 

 

처음에 관련 내용을 찾아보았을때는 vite가 트리 쉐이킹 하는 과정에서 주요한 일부 라이브러리를 누락하거나 잘못 가져오는 문제로 해당 문제가 발생한다고 생각을 했는데, vite의 문제여서 살짝 김빠지고 아쉬웠다.

<- GPT한테 이상한거 배움

 

최근에 노드 버전 업데이트 이슈나 리액트 버전 업데이트 이슈 등 해결하기 골아픈 문제가 계속 발생하는데,

결론을 내기 전에 조금 더 고민을 해봐야겠다