mobxjs / mobxjs/mobx

Change in behaviour in mobx v5 and v6

Open
#4,569 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 bug
Dominant language
TypeScript
Stars
28.2k
Forks
1.8k
Avg merge
1h 38m
Merged PRs (30d)
1

Description

Intended outcome:

In MobX v5, the following code would cause a crash in both the production and development build variants.

In MobX v6, this is no longer the case.

// v5 
import * as mobx from "mobx/lib/mobx.min.js";
// v6
// import * as mobx from "mobx/dist/mobx.cjs.production.min.js";


mobx.configure({ enforceActions: "observed" });

const store = mobx.observable({ count: 0 });
mobx.reaction(
  () => store.count,
  (val) => console.log("Store is: " + val)
);

mobx.runInAction(() => {
  store.count++;
});
// works;

store.count++;
console.log(store.count);

Codesandbox (v6): https://codesandbox.io/p/sandbox/zealous-volhard-zfm5tj
Codesandbox (v5): https://codesandbox.io/p/devbox/stupefied-fog-527m2r?workspaceId=ws_uqh2WMCajD26pqSUXVFEd

While breaking-changes are to be expected between major versions, I can't seem to find any GH issue, notes in the changelog, or PRs, that explain if this behaviour was or wasn't intentional.

The only reference I can find is https://github.com/mobxjs/mobx/issues/1758 which suggests to leave it up to consumers of the library to decide.

Actual outcome:

I expect that, if strict mode is enabled, for an error to be thrown regardless of the minified vs development

v5(development):

Image

V5 (production):

Image

V6 (production):

Image

V6 (development):

Image

NB: Is it a bug that the value is modified despite the error message implying it's not?

How to reproduce the issue:

Codesandbox (v6): https://codesandbox.io/p/sandbox/zealous-volhard-zfm5tj
Codesandbox (v5): https://codesandbox.io/p/devbox/stupefied-fog-527m2r?workspaceId=ws_uqh2WMCajD26pqSUXVFEd


I'm willing to open a PR for this. I understand that changing this behaviour back to v5-behaviour is likely to need to be done in a major release.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run both linked CodeSandboxes and compare the v5 and v6 behavior for configure({ enforceActions: "observed" }), reaction, runInAction, and the direct mutation. Then inspect the MobX implementation and build variants behind these APIs, along with the referenced issue and changelog history. Done means the intended behavior is decided, documented, and verified consistently in development and production builds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.