Error: Minified React error #130 / vite + 특정라이브러리 build 에러

 

📖 목차

 

 

---

💡 이슈

Error: Minified React error #130

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

로컬에서 확인하는 경우(yarn start)에는 문제가 없고, 페이지를 build하는 경우 build는 성공하지만 문제가 발생하는 특정 페이지에서 아래와 같은 에러메세지와 함께 페이지가 띄워지지 않는 이슈 발생

 

 

💡 원인

사용하고있는 라이브러리가 객체형식으로 들어오는 것이 문제가 되고 있었다.
webpack에서는 이런 경우 별다른 처리 없이 사용이 가능했지만 vite에서는 해당 부분에 대한 처리가 필요한 것으로 보임.

💡 해결

라이브러리에서 값이 객체형식으로 들어오는지 체크하고 값을 처리하는 과정을 추가

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

...

export const ImgEditor = () => {

    const ImageEditorTag = ImageEditor.default ? ImageEditor.default : ImageEditor;

    return (
         ...
        <ImageEditorTag />
        ...
    );
}

참고

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