[MobX] "There are multiple, different versions of MobX active" 에러 원인과 해결 방법

MobX 다중 버전 에러

MobX를 이용해 개발하다 보면 다음과 같은 에러 메시지를 마주칠 수 있다.

1. [MobX] minified error nr: 35.
2. There are multiple, different versions of MobX active. Make sure MobX is loaded only once or use `configure({ isolateGlobalState: true })`

 

1번 에러는 production 환경에서 볼 수 있는 메시지로, MobX 소스코드를 보면 2번과 똑같은 에러라는 것을 알 수 있다. 이 에러는 무엇이고, 어떻게 해결할 수 있는지 알아보자.

 

에러 발생 원인

이 에러는 버전이 서로 다른 버전의 MobX들을 동시에 사용할 때 발생한다. 여기서 이야기하는 버전은 MobX 내부 상태를 관리하기 위해 사용하는 저장소의 버전을 의미하며, MobX 패키지의 버전과는 관련이 없다.

 

MobX의 내부 상태 저장소를 초기화하는 코드를 살펴보면, 이미 초기화된 MobX의 내부 상태 저장소가 있으면 현재 초기화하려는  `MobXGlobals` 객체의 버전과 비교하는 로직이 있다. 이때의 버전은 클래스 안에 선언된 버전으로, 패키지의 버전과는 관련이 없다.

 

이렇게 내부 상태 저장소를 초기화 하기 전에, 버전이 다른 내부 상태 저장소가 있다는 것이 확인되면 MobX는 여러 개의 MobX 버전이 초기화 됐으니 확인하라는 에러를 던진다.

 

해결 방법

방법 1. MobX 버전 통일하기

여러 개의 MobX 버전을 사용해서 발생하는 문제이므로, 사용하고 있는 MobX 버전을 하나로 통일하면 된다. 정확히는 MobXGlobals의 버전이 같은 패키지 버전들로 맞춰야 하는 것이지만, 패키지 버전을 선택할 수 있다면 안전성을 위해 패키지 버전을 하나로 통일하는 것을 추천한다.

 

방법 2. isolateGlobalState 옵션 설정하기

부득이하게 사용하고 있는 MobX 패키지들의 버전을 통일할 수 없는 경우를 위해, MobX는 내부 상태 저장소를 패키지별로 격리할 수 있는 옵션을 제공한다.

import { configure } from 'mobx';

// https://mobx.js.org/configuration.html#isolateglobalstate-boolean
configure({
  isolateGlobalState: true,
});

 

다른 버전의 MobX 패키지를 import 하기 전에 configure 함수를 호출해야 함을 주의하자.