There are multiple mobx instances actives

Question

Since the last update of Mobx 3.6 to Mobx 4, my application just stopped working. I'm using react-native and I just followed the instructions to migrate to the newest features, but my application just keeps crashing displaying the following error:

[mobx] There are multiple mobx instances active. This might lead to unexpected results: See https://github.com/mobxjs/mobx/issues/1082 for details.

Click here to check the error image

Mobx store:

I just created a simple observable object, with the following code:

import React, { Component } from "react";

import { observable } from "mobx";

const ProductsStore = observable.object(
  {
    selectedProduct: null,
    products: [
      {
        id: 1,
        name: "NVIDIA 1050TI",
        desc: "4GB OC",
        model: "ASUS",
        price: 1050,
        quantity: 1
      },
      {
        id: 2,
        name: "NVIDIA 1060TI",
        desc: "6GB OC",
        model: "EVGA",
        price: 1050,
        quantity: 1
      },
      {
        id: 3,
        name: "NVIDIA 1070TI",
        desc: "8GB OC",
        model: "MSI",
        price: 1050,
        quantity: 1
      },
      {
        id: 4,
        name: "NVIDIA 1080TI",
        desc: "11GB OC",
        model: "FOUNDERS EDITION",
        price: 1050,
        quantity: 1
      }
    ]
  },
  { selectedProduct: observable, products: observable }
);

export { ProductsStore };

But, when I try to import this file, it will crash the application and it will display the error that I've mentioned before.

import { ProductsStore } from '@store'

I've tried without the alias, but it seems it's not working.

Answer 1

I've solved the problem while chatting with @mweststrate and figured out that in my project, I'm using a library which depends from an old version of mobx.

Versions > 3.6, only accepts one instance of mobx.

The library react-native-router-flux is using a old version, which was responsible for causing this issue.

The workaround, was adding the resolutions property to the package.json file and adding the mobx and mobx-react to this property.

  "resolutions": {
    "mobx": "^4.1.0",
    "mobx-react": "^5.0.0"
  },

But the resolutions property, is only available for yarn, not for npm. This property, overwrites old referred dependencies. For further questions, read the docs.

Selective resolutions in yarn

Multiple MobX instances in your application #1082