Skip to content

Cannot get mobx #1 tutorial to work; exception #48

Closed
@mikeyfev1

Description

@mikeyfev1

Hello, thank you for the wonderful tutorials! I am trying to work my way through the mobx #1 tutorial and I am having problems. The store object (defined as a TodoStore) is not getting defined correctly. Here is my TodoStore.js file; it is very close to identical (I added some labels in the console.log calls) to yours in the video at 4:30:

import { autorun, observable } from "mobx"

class TodoStore {
@observable todos = ["buy milk", "buy eggs"]
@observable filter = ""
}

var store = window.store = new TodoStore

export default store

autorun(() => {
console.log("Filter: " + store.filter)
console.log("First item: " + store.todos[0])
})

(Sorry, indentation doesn't come out quite right). When I render the HTML, my console window shows:

Filter: undefined
mobx.module.js:2955 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@1] TypeError: Cannot read property '0' of undefined
at TodoStore.js:14

I can change the value of store.filter with a console assignment, but I cannot assign, inspect, or reference in any way store.todos[0]:

store.todos[0]
VM424:1 Uncaught TypeError: Cannot read property '0' of undefined
at :1:12

Whereas I cannot find anything different between the code in the video at 4:30 (which is not the final checked-in version of the code) and my code, I am the pupil here and I'm sure I have something incorrect. Do you have any advice for me concerning how I might fix this? I am using:

"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"mobx": "^3.1.16",
"mobx-react": "^4.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"

Thanks for any help you can provide.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions