Babel, Webpack 및 Mobx : TypeError : 정의되지 않은 'authenticate'속성을 읽을 수 없습니다.

Question

ESLint를 데코레이터 React 프로젝트로 MobX에 통합하는 과정에서 저장소 정의 문제가 발생합니다.

나는 mobx에서 데코레이터를 사용하는 방법에 관한 많은 게시물을 읽었으며 명확하게보고 된 방법으로 작동하도록했지만 동시에 공기를 사용하지 않고 대신 사용하는 정서가있다. 래퍼가 데코레이터를 대체합니다. 솔루션의 가독성과 사용 편의성을 잃어 버리지는 않겠지 만, 현재로서는이 작업을 수행 할 수있는 다른 방법이 무엇인지 확신 할 수 없습니다. 이 순간

나는 내 프로젝트에서 두 개의 자식 지점을 가지고 아래 질문에

코드 샘플을 linting 도구를 추가 발생할 때 문제가 위에서 언급 한 바와 같이 작업의 예, 장식 빌드 제공 할 수

App.jsx

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 (
     <div className={`container-fluid ${styles.wrapper}`}> 
     <Route exact path="/" render={props => <LazyRoute {...props} component={import('./Home')} />} /> 
     <Route exact path="/profile" render={props => <LazyRoute {...props} component={import('./Profile')} />} /> 
     <Route exact path="/balance" render={props => <LazyRoute {...props} component={import('./Balance')} />} /> 
     <Route render={props => <LazyRoute {...props} component={import('./Home')} />} /> 
     </div> 
    ); 
    } 
} 

.babelrc

{ "presets": ["react", "es2015", "stage-1"], "plugins": ["transform-decorators-legacy"] } 

개

의존성 :

"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" 
} 

webpack.config.js :

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&importLoaders=1&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&digest=hex&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&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/), 
    ], 
}; 

전체 콘솔 오류 메시지 :

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) 

Answer 1

나는 그 문제에 직면.

{ 
    "compilerOptions": { 
     "experimentalDecorators": true 
    } 
} 

2) 당신은했습니다 이미 "babel-plugin-transform-class-properties"를 설치,하지만 어쩌면 그것을 사용하지 않았다

1)이 포함 된 다음 jsconfig.json 프로젝트의 루트에있는 파일을 만듭니다 : 그것은 당신을 도움이 될 수 있습니다. 'transform-decorators-legacy' 직후 플러그인 섹션의 .babelrc에 'transform-class-properties'을 추가하십시오. 제 도움으로 저에게 도움이되었습니다. 나는 당신의 접근 방식을 시도하고 불행하게도 문제가 해결되지 않은

plugins: [ 
     'transform-decorators-legacy', 
     'transform-class-properties', 
]