react-redux-firebase, “你可能需要一个合适的加载器来处理这个文件类型。”答案

【问题标题】：react-redux-firebase, "You may need an appropriate loader to handle this file type."react-redux-firebase, “你可能需要一个合适的加载器来处理这个文件类型。”
【发布时间】：2017-02-10 00:51:25
【问题描述】：

我正在开发一个集成了 react、redux 和 firebase 的项目。 react-redux-firebase 似乎是一个方便的工具。但是，代码未成功编译。下面是错误，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')
)

【问题讨论】：

标签： javascript reactjs firebase redux frontend

【解决方案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")
  ]

【讨论】：

我在 .babelrc 上有 'es2015' 和 'react'。我也按照你的建议做了，错误仍然存在
我用你可以尝试的另一件事更新了我的答案。我可能是您需要包含您的 react-redux-firebase 而不是排除您的所有 node_modules 文件夹。
感谢您的后续cmets。不幸的是，我试过了，但错误仍然存在。
你使用的是什么版本的 react-redux-firebase 和 webpack？您是否尝试过使用示例中的配置？