React：你可能需要一个合适的加载器来处理这个文件

Question

您好，我收到以下错误，我尝试过的每一次都可以发现我的设置有什么问题（使用来自https://github.com/coryhouse/react-slingshot 的反应样本）我的错误：

ERROR in ./src/index.js
Module parse failed: c:\temp\react-slingshot\src\index.js Unexpected token (13:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:2)
    at Parser.pp.raise (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExprList (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
    at Parser.pp.parseSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)
 @ multi main

我的 WebPack 配置：

resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS), // Tells React to build in prod mode. https://facebook.github.io/react/downloads.htmlnew webpack.HotModuleReplacementPlugin());
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],query: {
          presets: ['es2015']
        }},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
    ]
  }
};

我的 package.json

...
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "^6.7.*",
    "babel-loader": "^6.2.*",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "^6.6.*",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.8.0",
    "browser-sync": "2.12.5",
   ...
    "webpack": "^1.12.*",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },

我的代码 index.js：

import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import configureStore from './store/configureStore';
require('./favicon.ico'); // Tell webpack to load favicon.ico
import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.

const store = configureStore();

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>, document.getElementById('app')
);

Answer 1

你不是忘记在 babel 预设中添加 'react' 了吗？

presets: ['es2015']

到

presets: ['react', 'es2015']

别忘了安装它

npm install --save-dev babel-preset-react

Answer 2

看起来对 Provider 的调用（第 13:2 行）有问题，这是您第一次引用导入的模块。

试试：

-- 将此行添加到 JS 加载器中的 webpack 配置中（与 include 处于同一级别）

exclude: /node_modules/

-- 强制删除节点模块并重新安装以确保它们没有损坏：

$ rm -rf node_modules

$ npm install