react-redux-firebase, "Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten."

Question

Ich arbeite an einem Projekt, das react, redux und firebase integriert. react-redux-firebase scheint ein praktisches Werkzeug zu sein. Der Code wird jedoch nicht erfolgreich ausgeführt. Unten ist der Fehler webpack.config.js, .babelrc und index.js. Vielen Dank für die Hilfe im Voraus.

Fehlermeldung:

ERROR in ./~/react-redux-firebase/src/connect.js 
Module parse failed: 
/Users/xiqianglin/ucsdflyers/node_modules/react-redux-firebase/src/connect.js 
Unexpected token (43:24) You may need an appropriate loader to handle this file type. 
|  } 
| 
|  static contextTypes = { 
|  store: PropTypes.object.isRequired 
|  }; 
@ ./~/react-redux-firebase/src/index.js 1:0-31 @ ./src/index.js @ multi ./src/index.js 


/****And there are other similar errors, all "...appropriate loader..." ***/ 

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/src/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
entry: [ 
     './src/index.js' 
     ], 

module: { 
     loaders: [ 
        {test: /\.js$/, 
        exclude: /node_modules/, 
        loader:'babel-loader'} 
       ] 
     }, 

resolve: { 
    extensions: [".js", ".jsx", ".es6"] 
}, 

output: { 
     filename: "index_bundle.js", 
     path: __dirname + '/dist' 
     }, 

plugins: [HTMLWebpackPluginConfig] 
}; 

.babelrc

{ 
    "presets": ["react", "es2015"] 
} 

index.js

/*Other Imports...*/ 
import { firebaseStateReducer } from 'react-redux-firebase'; //This is the line causing error 

ReactDOM.render(
    <Provider> 
    <App/> 
    </Provider>, 
    documeng.getElementById('app') 
) 

Answer 1

Duble überprüfen, dass Sie alle Ihre Abhängigkeiten npm install10ed.

Dann, wenn das nicht funktioniert, versuchen Sie dies:

npm install babel-preset-es2015

und fügen Sie Ihre die eine Abfrage für es2015 nach exclude

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader:'babel-loader', 
    query: { 
    presets: ['es2015'] 
    } 
} 

Wenn Sie einen bestimmten Knotenmodul aufnehmen müssen Versuchen Sie, das Quellverzeichnis und den spezifischen Knotenmodulordner, der von babel-loader analysiert werden soll, einzubeziehen. Also statt des exclude: /node_modules/, versuchen

include: [ 
    path.resolve(__dirname, "src"), 
    path.resolve(__dirname, "node_modules/react-redux-firebase") 
    ]