[nextjs] bootstrap modal 사용 시 'modal is not a function' 오류 처리

react + nextjs 로 frontend 화면 개발을 진행중에 있는데 삽질의 연속이네요.

스프링 개발환경에 있던 시스템을 react 로 포팅하는 과정중에 있는데 이번엔 modal 이 안먹혀서 삽질을 했습니다.

 

$('#modalDiv').modal('show'); 코드로 모달 화면이 떠야 하지만 modal is not a function 오류만 뱉어내고 있습니다.

 

npm run dev 명령어로 프론트엔드 화면을 구동시켜보면 아래와 같은 런타임에러가 발생하고 있습니다.

 

크롬 개발자도구 콘솔에 드는 풀 에러 메시지는 다음과 같은데 

Uncaught (in promise) TypeError: jquery__WEBPACK_IMPORTED_MODULE_4___default(...)(...).modal is not a function
    at doLogin (login.js:87:30)

 

첫번째 방법은 window 객체로부터 loginError 객체를 찾아 modal을 호출해주는 겁니다.

서버 렌더링 방식 때문에 이러한 접근을 해야 한다고 하는데 아직 깊숙이 들어가보지 못해서 자세한 설명은 어렵네요

window.$('#loginError').modal('show');

 

 

두번째 방법은 bootstrap 을 설치해 임포트 시켜서 modal 객체를 정의해서 사용하는 방법입니다.

 

// 부트스트랩 설치 : npm i bootstrap 

const { Modal } = require("bootstrap");
const myModal = new Modal("#loginError");
myModal.show();

 

react-modal 모듈을 통해 Modal 컴포넌트를 사용해서 구성해야 하지만 외부 UI 템플릿을 쓰는 바람에 jquery 도 혼용되고 bootstrap 도 외부 모듈을 쓰면서 발생하는 오류로 보이는데 아직 더 많은 삽질을 해야 할 듯 합니다.