mobx-state-tree

mst-crash.jsx

// Aditional Non MOBX-STATE-TREE Related Code
...

// Import our Stores Here
import LanguageStore from './stores/language';

const languageStore = LanguageStore.create({});

const store = {
  language: languageStore
};

const router = (
  <Provider {...store}>
    <Router history={history}>
      <Route exact path="/" component={App} />
    </Router>
  </Provider>
);

// Store
import { types } from 'mobx-state-tree';

import esES from '../language/i18n/es';
import enUS from '../language/i18n/en';

const LanguageStore = types.model(
  'LanguageStore',
  {
    language: types.optional(types.string, 'en'),
    get currentLanguage() {
      return this.language;
    },
    get resource() {
      switch (this.language) {
        case 'en':
          return enUS;
        case 'es':
          return esES;
        default:
          return enUS;
      }
    }
  },
  {
    changeLanguageTo(language) {
      this.language = language;
    }
  }
);

export default LanguageStore;

// ERROR THROWN VIA REACT ERROR OVERLAY
TypeError: __WEBPACK_IMPORTED_MODULE_0_mobx__.extras.interceptReads is not a function
ValueProperty.initialize
D:\react-apps\resume\node_modules\mobx-state-tree\dist\mobx-state-tree.module.js:1963
  1960 | ValueProperty.prototype.initialize = function (instance, snapshot) {
  1961 |     var node = getStateTreeNode(instance);
  1962 |     instance[this.name] = this.type.instantiate(node, this.name, node._environment, snapshot[this.name]);
> 1963 |     extras.interceptReads(instance, this.name, node.unbox);
  1964 | };
  1965 | ValueProperty.prototype.getValueNode = function (targetInstance) {
  1966 |     var node = targetInstance.$mobx.values[this.name].value; // TODO: blegh!
   
// MORE STACK TRACES    
...

// THE ORIGIN IT SEEMS TO BE HERE
(anonymous function)
D:\react-apps\resume\src\index.js:20
  17 | const history = createBrowserHistory();
  18 | 
  19 | // Because they're classes, we have to instantiate them here :)
> 20 | const languageStore = LanguageStore.create({});
  21 | 
  22 | const store = {
  23 |   language: languageStore
    
    
// PACKAGE JSON INFORMATION
{
  "name": "react-mobx-router",
  "version": "0.2.1",
  "private": true,
  "devDependencies": {
    "mobx-react-devtools": "^4.2.15",
    "react-scripts": "^1.0.7"
  },
  "dependencies": {
    "mobx": "^3.1.16",
    "mobx-react": "^4.2.1",
    "mobx-state-tree": "^0.8.2",
    "node-fetch": "^1.7.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "styled-components": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  }
}