Weird bug since 3.x

[matteoantoci]

Hi all!
I'm writing this post after searching through the github's past issues and doing some tests myself but failing to resolve my issue.
Here are the facts: I migrated my project from MobX 2.7 to MobX 3, all my tests are passing but there's something strange happening. In my page I have two modules exported by webpack, the app module and another one called utils, it instantiates an error logger and an internal clock, a mobx observable object with two computed properties that gets updated every 100ms, declared like so:

// ...

export default function createClock({ baseTime, jitterCorrection }) {
  let store;

  function getCurrentTime() {
    return new Date().getTime() - jitterCorrection.getTime();
  }

  const baseDateTime = new Date(baseTime);
  const updateElapsedTime = action(() => { store.elapsedTime += CLOCK_PRECISION; });
  const now = computed(() => {
    const currentDateTime = new Date();
    currentDateTime.setTime(baseDateTime.getTime() + store.elapsedTime);
    return currentDateTime;
  });

  store = observable({ elapsedTime: getCurrentTime(), now });

  setInterval(updateElapsedTime, CLOCK_PRECISION);

  return store;
}

The app module receives the clock in its factory and it uses it for doing some stuff, like creating a widget with a countdown. Everything was working with version 2.7 but now the countdown widget is not getting updated anymore.

I investigated a bit and I made a test, letting the utils module exporting this:

import { autorun } from 'mobx';
import createClock from '../utils/Clock';
// ...

export default ({ config, jitterCorrection }) => {
  const clock = createClock({ ...config.clock, jitterCorrection });
  // ...

  return {
    autorun,
    clock,
    // ...
  };
};

while the app module exports this:

import { autorun } from 'mobx';

export default ({ config, el, clock }) => {
  const eventBus = createEventBus({});
  const app = createApp({ config, el, eventBus, clock });
  return {
    autorun,
    // ...
  };
};

In my html I wrote this:

var utils = utilsInit({ config: window.config, jitterCorrection: window.jitterCorrection });
var app = appInit({ config: window.config, el: '#root', clock: utils.clock });

utils.autorun(() => console.log('utils', utils.clock.elapsedTime));
app.autorun(() => console.log('app', utils.clock.elapsedTime));

The surprising thing is that the utils's autorun runs every 100ms as expected while the app's one not.

Am I doing something wrong? If you need more insights please tell me. Thanks!!

[mweststrate]

Could you check whether the bug already occurs in [email protected] ? That is the only recent change that might relate to packaging

[matteoantoci]

Thanks for the quick reply!

I installed [email protected] with [email protected] and I can reproduce the issue. Though, the other parts of the app work as expected.

With [email protected] (and [email protected]) it doesn't happen.

[mweststrate]

Hmm... that means it relates to how mobx is bundled, and that mobx is most probably bundled twice into your application. Could you verify that, or share your setup? Ideally complete project but package.json and bundler config could be a start.

[matteoantoci]

You pointed me in the right direction, I analysed my exported modules with webpack-bundle-analyzer and there were actually some duplications, I fixed the CommonsChunkPlugin settings and now it works perfectly.

Thank you so much for the help and for maintaining such a great project!