react-redux-firebase，“您可能需要一个合适的加载器来处理此文件类型。”

Question

我正在做一个集成了react，redux和firebase的项目。react-redux-firebase似乎是一个方便的工具。但是，代码没有成功编译。下面是error、webpack.config.js、.babelrc和index.js。提前感谢您的帮助。

错误消息：

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

重复检查你是否npm install-ed了你所有的依赖。

如果这不起作用，试试这个：

npm install babel-preset-es2015

并在您的exclude之后添加es2015查询

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

如果需要包含特定的节点模块，请尝试包含要由babel-loader解析的源目录和特定的节点模块文件夹。因此，不要使用exclude: /node_modules/,，而是尝试

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