title: Babel, Webpack and Mobx: TypeError: Cannot read property 'authenticate' of undefined
body: <p>In the process of integrating ESLint to a MobX with decorators React project, I run into the problem of the stores being undefined.</p>
  
  <p>I have read a lot of the posts regarding how to use decorators with mobx and there's a definite, reported way to make it work, but at the same time there's a sentiment in the air to just not use them and instead use the wrapper functions the decorators replace. I would not like to lose the readability and ease of use in way of a solution, but at this moment I'm not sure what else I can try to have this working.</p>
  
  <p>At this moment I have two separate git branches in my project and can provide examples of the working build with decorators, as mentioned above the problem arises when adding linting tools</p>
  
  <p>Code samples in question below:</p>
  
  <p>App.jsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, withRouter } from 'react-router-dom';
  import { inject, observer } from 'mobx-react';
  import LazyRoute from 'lazy-route';
  import styles from './styles/app.css';
  
  @withRouter
  @inject('store')
  @observer
  export default class App extends Component {
    constructor(props) {
      super(props);
      this.store = this.props.store; 
    }
    componentDidMount() {
      //here's where the error is triggered, authenticate is a function in the store but it throws undefined
      this.store.appState.authenticate();
    }
    render() {
      return (
        &lt;div className={`container-fluid ${styles.wrapper}`}&gt;
          &lt;Route exact path="/" render={props =&gt; &lt;LazyRoute {...props} component={import('./Home')} /&gt;} /&gt;
          &lt;Route exact path="/profile" render={props =&gt; &lt;LazyRoute {...props} component={import('./Profile')} /&gt;} /&gt;
          &lt;Route exact path="/balance" render={props =&gt; &lt;LazyRoute {...props} component={import('./Balance')} /&gt;} /&gt;
          &lt;Route render={props =&gt; &lt;LazyRoute {...props} component={import('./Home')} /&gt;} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{   "presets": ["react", "es2015", "stage-1"],   "plugins": ["transform-decorators-legacy"] }
  </code></pre>
  
  <p>dependencies:</p>
  
  <pre><code>"devDependencies": {
  "babel": "^6.5.2",
  "babel-core": "^6.18.0",
  "babel-loader": "^6.2.7",
  "babel-plugin-transform-async-to-generator": "^6.16.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-polyfill": "^6.23.0",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react": "^6.16.0",
  "babel-preset-stage-1": "^6.16.0",
  "css-loader": "^0.25.0",
  "extract-text-webpack-plugin": "^2.0.0-beta.4",
  "html-webpack-plugin": "^2.22.0",
  "image-webpack-loader": "^2.0.0",
  "node-sass": "^3.10.1",
  "postcss-loader": "^0.13.0",
  "react-hot-loader": "next",
  "resolve-url-loader": "^1.6.0",
  "rimraf": "^2.5.4",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.1",
  "url-loader": "^0.5.7",
  "webpack": "^2.4.1",
  "webpack-dev-server": "^2.4.5"
    },
    "dependencies": {
      "axios": "^0.15.0",
      "babel-eslint": "^8.0.0",
      "babel-preset-env": "^1.6.0",
      "bootstrap": "^3.3.7",
      "create-react-class": "^15.6.0",
      "eslint": "^3.19.0 || ^4.3.0",
      "eslint-config-airbnb": "^15.1.0",
      "eslint-config-prettier": "^2.5.0",
      "eslint-loader": "^1.9.0",
      "eslint-plugin-import": "^2.7.0",
      "eslint-plugin-jsx-a11y": "^5.1.1",
      "eslint-plugin-prettier": "^2.3.0",
      "eslint-plugin-react": "^7.1.0",
      "faker": "^3.1.0",
      "http-server": "^0.10.0",
      "jquery": "^3.2.1",
      "lazy-route": "^1.0.7",
      "mobx": "^2.5.2",
      "mobx-react": "4.0.0",
      "mobx-react-devtools": "^4.2.6",
      "moment": "^2.18.1",
      "package": "^1.0.1",
      "react": "^15.6.1",
      "react-bootstrap": "latest",
      "react-bootstrap-date-picker": "^5.1.0",
      "react-dom": "^15.6.1",
      "react-loader": "^2.4.2",
      "react-router-dom": "latest",
      "react-stripe-elements": "^0.0.8",
      "rfx-core": "^1.5.3",
      "transform-runtime": "^0.0.0",
      "whatwg-fetch": "^1.0.0"
  }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: ['webpack-dev-server/client?http://0.0.0.0:3000', 'babel-polyfill', 'whatwg-fetch', './src/index.jsx'],
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 8000,
      host: 'localhost',
      publicPath: '/',
      historyApiFallback: true,
      disableHostCheck: true,
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
    },
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/',
      filename: 'app.[hash].js',
    },
    devtool: 'eval',
    module: {
      rules: [
        {
          test: /\.js$|jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        {
          test: /\.scss|css$/,
          use: [
            'style-loader',
            'css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]',
            'postcss-loader',
            'resolve-url-loader',
            'sass-loader?sourceMap',
          ],
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
            'file-loader?hash=sha512&amp;digest=hex&amp;name=[hash].[ext]',
            {
              loader: 'image-webpack-loader',
              options: {
                progressive: true,
                optimizationLevel: 7,
                interlaced: false,
                pngquant: {
                  quality: '65-90',
                  speed: 4,
                },
              },
            },
          ],
        },
        {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: 'url-loader?limit=10000&amp;mimetype=application/font-woff',
        },
        {
          test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: 'file-loader',
        },
        {
          enforce: 'pre',
          test: /\.jsx?$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new webpack.NamedModulesPlugin(),
      new HtmlWebpackPlugin({ hash: false, template: './index.hbs' }),
      new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nb/),
    ],
  };
  </code></pre>
  
  <p>Full console error message:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'authenticate' of undefined
  at App.componentDidMount (webpack:///./src/components/App.jsx?:54:26)
  at App.target.(anonymous function) (webpack:///./~/mobx-react/index.js?:262:13)
  at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:264:25)
  at measureLifeCyclePerf (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12)
  at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:263:11)
  at CallbackQueue.notifyAll (webpack:///./~/react-dom/lib/CallbackQueue.js?:76:22)
  at ReactReconcileTransaction.close (webpack:///./~/react-dom/lib/ReactReconcileTransaction.js?:80:26)
  at ReactReconcileTransaction.closeAll (webpack:///./~/react-dom/lib/Transaction.js?:209:25)
  at ReactReconcileTransaction.perform (webpack:///./~/react-dom/lib/Transaction.js?:156:16)
  at batchedMountComponentIntoNode (webpack:///./~/react-dom/lib/ReactMount.js?:126:15)
  </code></pre>