MST DevTools Crash

mst-devtools-crash.jsx

/**
 * ERROR THROWN
 **/
D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\uti…:14 Uncaught (in promise) Error: [mobx-state-tree] This object has died and is no longer part of a state tree. It cannot be used anymore. The object (of type 'frozen[]') used to live at '/repos'. It is possible to access the last snapshot of this object using 'getSnapshot', or to create a fresh copy using 'clone'. If you want to remove an object from the tree without killing it, use 'detach' instead.
    at invariant (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\uti…:14)
    at Object.fail (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\uti…:6)
    at ObservableArray.get (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\cor…:120)
    at g (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-react-devtools\ind…:1)
    at f (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-react-devtools\ind…:1)
    at r (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-react-devtools\ind…:1)
    at Array.<anonymous> (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-react-devtools\ind…:1)
    at spyReport (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:1421)
    at spyReportStart (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:1425)
    at setPropertyValue (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:2403)
    at GithubStore.set [as repos] (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:2363)
    at GithubStore.setFetchedData (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\src\stores\github.js:46)
    at executeAction (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:660)
    at GithubStore.res (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx\lib\mobx.js:651)
    at GithubStore.actionInvoker (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\cor…:38)
    at GithubStore.setFetchedData (eval at createNamedFunction (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\uti…:110), <anonymous>:3:45)
    at runRawAction (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\cor…:5)
    at runMiddleWares (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\cor…:21)
    at GithubStore.actionInvoker (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\cor…:50)
    at GithubStore.setFetchedData (eval at createNamedFunction (D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\node_modules\mobx-state-tree\lib\uti…:110), <anonymous>:3:45)
    at D:\react-apps\3RMXi\examples\mobx-state-tree-github-repos-demo\src\stores\github.js:62
    at <anonymous>
        
/**
 * Github MST Store
 **/
        
import fetch from "node-fetch";
import { types } from "mobx-state-tree";

const GithubClientId = "my_client_id";
const GithubSecretId = "my_secret_id";

const UserModel = types.model(
  "UserModel",
  {
    name: types.maybe(types.string),
    bio: types.maybe(types.string),
    avatar: types.maybe(types.string)
  },
  {}
);

const GithubStore = types.model(
  "GithubStore",
  {
    searchName: types.optional(types.string, ""),
    user: types.optional(types.maybe(UserModel), null), // Object with all the user data that comes from the Github API Fetch
    repos: types.optional(types.array(types.frozen), []), // Array of Repositories that comes from the Github API Fetch
    fetchingData: types.optional(types.boolean, false)
  },
  {
    changeUserToSearchFor(username) {
      this.searchName = username;
    },
    fetchFromGithub(endpoint) {
      return new Promise((resolve, reject) => {
        const url = `https://api.github.com${endpoint}?client_id=${GithubClientId}&client_secret=${GithubSecretId}`;
        fetch(url).then(response => {
          response.json().then(result => {
            resolve(result);
          });
        });
      });
    },
    setFetchedData(user, repos) {
      const userModel = UserModel.create({
        name: user.name,
        bio: user.bio,
        avatar: user.avatar_url
      });
      this.user = userModel;
      this.repos = repos;
      this.fetchingData = false;
    },
    searchForUser() {
      const store = this;
      if (
        !this.searchName ||
        (this.user && this.searchName === this.user.login)
      )
        return;
      this.fetchingData = true;
      Promise.all([
        this.fetchFromGithub(`/users/${this.searchName}`),
        this.fetchFromGithub(`/users/${this.searchName}/repos`)
      ]).then(function(result) {
        const [user, repos] = result;
        store.setFetchedData(user, repos);
      });
    }
  }
);

export default GithubStore;