mobx-state-tree: Error updating to MST 1.1.0 from 1.0.1

Hi guys, we are having some issue with frozen types after updating to the last version. In our rootStore (we have one for redux dev tools), we are having this issue, but the most important thing here, is that this just happen when we build the project with CRA and upload to the server.

RootStore.js

const RootStore = types
  .model('RootStore', {
    languageStore: types.optional(LanguageStore, getSnapshot(languageStore)),
    folderStore: types.optional(FolderStore, getSnapshot(folderStore)),
    authStore: types.optional(AuthStore, getSnapshot(authStore)),
    templateStore: types.optional(TemplateStore, getSnapshot(templateStore)),
    geniallyStore: types.optional(GeniallyStore, getSnapshot(geniallyStore)),
    myBrandStore: types.optional(MyBrandStore, getSnapshot(myBrandStore)),
    inspirationStore: types.optional(
      InspirationStore,
      getSnapshot(inspirationStore)
    ),
    invoiceStore: types.optional(InvoiceStore, getSnapshot(invoiceStore)),
    modalStore: types.optional(ModalStore, getSnapshot(modalStore))
  })
  .actions(self => ({
    afterCreate() {
      self.authStore.fetchUserData();
    }
  }));
const rootStore = RootStore.create(); // THE ERROR IS HERE WITH TEMPLATE STORE (SEE BELOW)

export default rootStore;

The error is in this store, templateStore, we are using frozen on it like this:

const TemplateStore = types
  .model('TemplateStore', {
    templates: types.array(Template),
    status: types.enumeration('State', ['loading', 'loaded', 'error']),
    search: types.optional(types.string, ''),
    templateType: types.maybe(types.string),
    filters: types.frozen, // <-- This 
    secondaryFilters: types.frozen, // <-- This
    tags: types.array(types.string),
    templatesBuyedLength: types.maybe(types.number, 0)
  })
... actions, views and stuff

Create the template store:

const templateStore = TemplateStore.create({
  status: 'loading',
  templates: [],
  filters: {
    isNew: undefined,
    subcategoryBusiness: undefined,
    subcategoryEducation: undefined,
    subcategoryOthers: undefined
  },
  secondaryFilters: {
    premium: undefined,
    free: undefined,
    buyed: undefined
  },
  tags: []
});
export { TemplateStore };
export default templateStore;

All is working fine with 1.0.1, we modified the frozen with Object.assing like an inmutable… did you change anything in version 1.1.0 about frozen that we need to understand?

Thanks!!

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (20 by maintainers)

Most upvoted comments

Sorry, I’m out of office this week, I will try on weekend!!

El jue., 23 nov. 2017 a las 14:18, Mattia Manzati (notifications@github.com) escribió:

Ok, master branch has an updated version that should fix the issue, can somebody please check if using the version built from master branch fixes the issue? 😃

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-state-tree/issues/513#issuecomment-346615947, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWsedSKUSOAkhHF19fTWKwLJVcBajQQks5s5XCQgaJpZM4QVQ2t .

chemitaxis on Nov 23, 2017

@mattiamanzati damn, I spent too long redacting this and you already found the problem 😂

d4rky-pl on Nov 8, 2017

I think I found the problem. The behaviour of getSnapshot for frozen values is different between the versions:

Since 1.1.0 there’s a check if we’re in production mode and objects are frozen only in development, this was introduced as a feature in 74590410
When creating a new Node, there’s a check to see if the $treenode metadata can be attached to it, this happens in node.ts#L49 where canAttachNode is called and it checks with Object.isFrozen
This causes different behaviour between production and development:
- since types.frozen objects are actually frozen in development, they don’t have $treenode so they’re treated as a simple object every time and information about them ever being part of the tree is lost
- in production objects are not frozen so canAttachNode returns true, this adds $treenode to object making isStateTreeNode return true and causing a failure

@chemitaxis the workaround for the problem that I see right now would be to avoid initializing global objects as default export and instead create an instance in place:

types.optional(LanguageStore, () => LanguageStore.create())

You could export your store object creation as a function from your file:

export default () => TemplateStore.create({
  // ... etc
});

But I don’t think it’s a nice pattern and you should make sure all types.optional are set properly instead (or pass the extra data in inlined .create()).

d4rky-pl on Nov 8, 2017

Oh, I think I know what’s going on, frozen is not froze in production, so canAttachNode() can be attached in production, but not in dev… Hard to test, but should be that! Can you please try to manually freeze the value before assigning it to check if it works?

mattiamanzati on Nov 8, 2017