javascript - React Native & Webpack: Confusing when ESLint detects errors -

for react native project, i'm using react-native-webpack-server, babel, eslint , webpack-hotloader

when eslint detects errors in javascript code, ios simulator still refresh app , display stacktrace. instead displaying errors reported eslint, i've of errors index.ios.bundle can confusing , hard debug.

for instance code:

'use strict';  import react, {     stylesheet,     text,     view,     touchablehighlight,     component } 'react-native';  rger // cause error.  export default class contactscomponent extends component {   render() {     return (       <view>         <text>this simple application.</text>       </view>     );   } } 

i have error reported eslint:

11:1   error    "rger" not defined // pretty straightforward 

and error reported y simulator (so react native):

invariant violation: application contactscomponent has not been registered. either due require() error during initialization or failure call appregistry.registercomponent. 

this error message isn't straightforward.

i wonder if there more efficient way use eslint, maybe showing errors directly in simulator?

here webpack.config.js:

var fs = require('fs'); var path = require('path'); var webpack = require('webpack');  var config = {    debug: true,    devtool: 'source-map',    entry: {     'index.ios': ['./javascript/ios.js'],   },    output: {     path: path.resolve(__dirname, 'build'),     filename: '[name].js',   },    module: {     loaders: [{       test: /\.js$/,       exclude: /node_modules/,       loaders: ["babel?stage=0", "eslint"]     }]   },    plugins: [],  };  // hot loader if (process.env.hot) {   config.devtool = 'eval'; // speed incremental builds   config.entry['index.ios'].unshift('react-native-webpack-server/hot/entry');   config.entry['index.ios'].unshift('webpack/hot/only-dev-server');   config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');   config.output.publicpath = 'http://localhost:8082/';   config.plugins.unshift(new webpack.hotmodulereplacementplugin());   config.module.loaders[0].query.plugins.push('react-transform');   config.module.loaders[0].query.extra = {     'react-transform': {       transforms: [{         transform: 'react-transform-hmr',         imports: ['react-native'],         locals: ['module']       }]     }   }; }  // production config if (process.env.node_env === 'production') {   config.plugins.push(new webpack.optimize.occurrenceorderplugin());   config.plugins.push(new webpack.optimize.uglifyjsplugin()); }  module.exports = config; 

and .eslintrc:

{   "parser": "babel-eslint",   "plugins": [     "react"   ],   "ecmafeatures": {     "jsx": true   },   "extends": "eslint:recommended",   "rules": {     "react/display-name": 1,     "react/forbid-prop-types": 1,     "react/jsx-boolean-value": 1,     "react/jsx-closing-bracket-location": 1,     "react/jsx-curly-spacing": 1,     "react/jsx-indent-props": 1,     "react/jsx-max-props-per-line": 1,     "react/jsx-no-duplicate-props": 1,     "react/jsx-no-literals": 1,     "react/jsx-no-undef": 1,     "react/jsx-quotes": 1,     "react/jsx-sort-prop-types": 1,     "react/jsx-sort-props": 1,     "react/jsx-uses-react": 1,     "react/jsx-uses-vars": 1,     "react/no-danger": 1,     "react/no-did-mount-set-state": 1,     "react/no-did-update-set-state": 1,     "react/no-direct-mutation-state": 1,     "react/no-multi-comp": 1,     "react/no-set-state": 1,     "react/no-unknown-property": 1,     "react/prop-types": 1,     "react/react-in-jsx-scope": 1,     "react/require-extension": 1,     "react/self-closing-comp": 1,     "react/sort-comp": 1,     "react/wrap-multilines": 1,     "strict": 0   } } 

any suggestion?

i found way directly display error in simulator. use eslint-loader package.