I was getting this error after using the example in the README (using IntelliJ IDEA rather than VSCode). For reasons I don't understand, exporting the machine is what fixed it for me 🤷‍♂️

export default machine;

Okey, I'll try to figure it out on a snowpack side. Thanks!

I think you will need to investigate the problem by yourself. There is not enough people capacity to do that for you. Snowpack is still considered more like a bleeding edge.

Hey! I love your work at this package!

It doesn't seem to work with Snowpack. I'm getting this error:

SyntaxError: The requested module '../../../../../_snowpack/pkg/@xstate/compiled/react.js' does not provide an export named 'useMachine'

<!-- Not following the template might result in your issue being closed without further notice --> Question

• [x] I've checked documentation and searched for existing issues
• [ ] I tried the spectrum channel

<!-- Write your question below --> I am trying to create a computed property that returns a types.array filtered based on a given value. On a normal javascript array I would use the filter function. The problem is that when I access the variable, which is of type IMSTArray, no filter function is available.

Example

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  exerciseCategories: types.array(string),
});

const ExerciseList = types
  .model({
    id: types.identifier,
    exerciseList: types.array(ExerciseTemplate),
  })
  .views((self) => ({
    filterByCategory(category: string) {
      return self.exerciseList.filter // ???;
    },
  }));

How can I filter a variable of type types.array? Am I doing something wrong?

After looking around on other issues and the types' definitions I found a solution using SnapshotIn:

import { types, cast, SnapshotIn } from "mobx-state-tree";

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  // Array of strings
  exerciseCategories: types.array(types.string),
});

// Type from ExerciseTemplate to update ExerciseList
interface IExerciseTemplate extends SnapshotIn<typeof ExerciseTemplate> {}

const ExerciseList = types
  .model({
    id: types.identifier,
    // Array of ExerciseTemplate
    exerciseList: types.array(ExerciseTemplate),
  })
  .actions((self) => ({
    // Use IExerciseTemplate with cast
    setExerciseList(exerciseList: IExerciseTemplate[]) {
      self.exerciseList = cast(exerciseList);
    },
  }));

Then you can set the array like this:

exerciseListStore.setExerciseList([
  {
    id: "id1",
    name: "My workout 1",
    exerciseCategories: ["c1"],
  },
  {
    id: "id2",
    name: "My workout 2",
    exerciseCategories: ["c1"],
  },
])

Sorry, it seems that for some reason the typescript compiler did not recognize the correct type. I reloaded the IDE and now it works.

I have another issue now. I am trying to set the value of the list. I have the following code:

.actions((self) => ({
    setExerciseList(exerciseList: /* ??? */) {
      self.exerciseList = exerciseList;
    },
  }));

What type should the exerciseList have?

Thanks! When i checked out that version of MST i couldn't see a .toJS function. I do see .toJSON() which might do the same thing. It does mention that if you need a deep clone to use mobx's toJS() (same as the codesandbox). For reference this is the code at that point:

https://github.com/mobxjs/mobx-state-tree/tree/05248f72a86c77cd8dce6bc9383e82747db88770

<!-- Not following the template might result in your issue being closed without further notice --> Question

• [x] I've checked documentation and searched for existing issues
• [ ] I tried the spectrum channel

<!-- Write your question below --> I am trying to create a computed property that returns a types.array filtered based on a given value. On a normal javascript array I would use the filter function. The problem is that when I access the variable, which is of type IMSTArray, no filter function is available.

Example

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  exerciseCategories: types.array(string),
});

const ExerciseList = types
  .model({
    id: types.identifier,
    exerciseList: types.array(ExerciseTemplate),
  })
  .views((self) => ({
    filterByCategory(category: string) {
      return self.exerciseList.filter // ???;
    },
  }));

How can I filter a variable of type types.array? Am I doing something wrong?

mst ver.3.15.0 get an unobserved value. example:

const UserList = types
  .compose(
    ListCommon,
    types.model({
      items: types.array(UserListItem),
      url: types.optional(types.string, '/auth-api/user/all'),
      selectedUsers: types.array(types.string),
    })
  )

export const Users = types
  .model({
    list: types.optional(UserList, {}),
  })
  .actions((self) => ({
    async deleteFromSystem(content: ReactNode): Promise<void> {
      try {
        const resp = await self.deletion.deletedIdsValidation(
          '/auth-api/user/delete/validation',
          self.list.selectedUsers.toJS(),
          {
            spinnerKey: 'deleteValidation',
          }
        );
      }
   },
})

<!-- Not following the template might result in your issue being closed without further notice -->

Bug report

• [x] I've checked documentation and searched for existing issues
• [ ] I've made sure my project is based on the latest MST version

Sandbox link or minimal reproduction code <!-- link to your sandbox or alternatively minimal reproduction code-->

import { types, applySnapshot } from 'mobx-state-tree'

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update: data => {
      applySnapshot(self, data)
    },
    fetch: () => {
      self.update({})
    },
  }))

https://github.com/pustovalov/ts-mst-demo/blob/main/src/stores/current_user.ts#L20

Describe the expected behavior <!-- What should happen? --> TS should work with MST actions

Describe the observed behavior <!-- What happens instead? -->

Property 'update' does not exist on type '{ id: number; account_id: number; email: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ id: ISimpleType<number>; account_id: ISimpleType<number>; email: IType<...>; }, {}, _NotCustomized, _NotCustomized>>'

Dependencies MST: 3.17.3, same behavior with 5.0.0 TS: 4.1.3

TS config https://mobx-state-tree.js.org/tips/typescript as the documentation says, contain these options:

{
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
}

https://github.com/pustovalov/ts-mst-demo/blob/main/tsconfig.json#L9

@KislyakovDS thx

Why do you want a map of references and not an array? Also, for what it's worth, when you're building your input snapshot to pass to a .create call, references should be specified as the string identifiers for the things you want to reference, not the actual instances of the nodes you want to reference. tags[id] = id would be closer to what mobx-state-tree wants.

Have you read through the docs here https://mobx-state-tree.js.org/tips/typescript ? Specifically, the part about declaring multiple blocks so that subsequent blocks can depend on the prior ones? That solves this issue, I think this can be closed.

I think this is an issue for views too, not just actions. I can confirm it only happens for me when proxies are used. Is this maybe a plain mobx bug?

What was the error you were getting on the twitter example? I rebuilt it here and it seemed to be ok:

https://codesandbox.io/s/confident-shape-eph07?file=/src/App.js

Interesting. Lots to fix up on this page! Quick fixes, ill open a pr

I'd say we need to write a failing test for this behaviour then try to figure out what exactly is causing it.

I see. Do you know which version of MST you were on exactly? I went back through a few versions, and I can't find the point where it may have been removed.

In terms of what you're trying to do to though, are you looking to get an unobserved value or an unobserved node?

I was able to use toJS like this (see line 24 of index.js): https://codesandbox.io/s/mst-1641-mikmc?file=/src/index.js

Is it how you'd previously been using it?

no you using toJS from mobx i using
return someMSTtreeNode.someField.toJS()

How about this?

import { types, applySnapshot } from "mobx-state-tree";

export const CurrentUser = types
  .model("CurrentUser", {
    id: types.number,
    account_id: types.number,
    email: ""
  })
  .actions((self) => {
    const update = (data: any) => {
      applySnapshot(self, data);
    };

    const fetch = () => {
      update({});
    };

    return { update, fetch };
  });

@willrax I agreed with you for putting the applySnapshot into action would make sense for the protection purpose. BTW, I would like to remind you that the following code in the front page also fails for the same reason:

const twitterStore = TwitterStore.create({ tweets: [ { body: "Anyone tried MST?" } ] })

in this case I have to const twitterStore = TwitterStore.create() first then unprotect(twitterStore), I don't know if there is elegant way to do it.

Found one workaround:

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update(data: string) {
      applySnapshot(self, data)
    },
    fetch() {
      this.update({})
    },
  }))

But this one will not work with flow, to make it work together with flow need to do something like this:

import { types, applySnapshot, flow } from 'mobx-state-tree'

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update(data: string) {
      applySnapshot(self, data)
    },
    fetch() {
      this.update({})
    },
  }))
  .actions(self => ({
    fetchWithFlow: flow(function* fetchWithFlow() {
      self.update({})
    }),
  }))

it looks worse with these two .actions(, is there another way?

@geohuz We'll update the docs. I was just thinking about it though and I think if you were to apply a snapshot, doing this through an action would mean you don't have to mark the tree as unprotected. I've updated the codesandbox. I think this approach fits a little more with "MST way". Thoughts?

https://codesandbox.io/s/mst-1647-c9g0z?file=/src/index.js

Updates to use info over dir. console.dir will take the object as the first argument rather than allow for strings and objects to be pulled together. The output of dir is also similar to the output of an object in info. At least in Chrome.

Looks like there was such a problem in the past: https://github.com/mobxjs/mobx-state-tree/issues/1307

<!-- Not following the template might result in your issue being closed without further notice -->

Bug report

• [x] I've checked documentation and searched for existing issues
• [ ] I've made sure my project is based on the latest MST version

Sandbox link or minimal reproduction code <!-- link to your sandbox or alternatively minimal reproduction code--> https://github.com/pustovalov/ts-mst-demo/blob/main/src/stores/current_user.ts#L20

Describe the expected behavior <!-- What should happen? -->

Property 'update' does not exist on type '{ id: number; account_id: number; email: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ id: ISimpleType<number>; account_id: ISimpleType<number>; email: IType<...>; }, {}, _NotCustomized, _NotCustomized>>'

Describe the observed behavior <!-- What happens instead? --> TS should work with MST actions

Dependencies MST: 3.17.3, same behavior with 5.0.0 TS: 4.1.3

TS config as the documentation says contain these keys https://mobx-state-tree.js.org/tips/typescript

{
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
}

https://github.com/pustovalov/ts-mst-demo/blob/main/tsconfig.json#L9