javascript - ReactJS - 你可能需要一个适当的加载器错误

Question

所以我试着关注this React 教程(稍后将带我完成身份验证和与 PostgreSQL 的集成)。我注意到他的 react-router 已经过时了，因此使用了置顶评论来解决这个问题。但是，在 webpack.config.js 文件中安装 react-router-loader 后，出现以下错误:

ERROR in ./client/index.js
Module parse failed: /Users/shirazchokshi/react-redux/client/index.js 
Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
| 
| render((
|   <Router>
|     <div>
|       <Route path="/" component={App} />
@ ./client/index.js 11:29-90
@ multi webpack-hot-middleware/client ./client/index.js

这没有意义，因为我相信我已经在配置文件中加载了所有正确的加载器。尽管如此，下面是一些其他的上下文文件:

/client/index.js

import React from 'react';
import {render} from 'react-dom';
import { BrowserRouter as Router, Route, browserHistory } from 'react-router-dom';

import App from './component/App';

render((
  <Router>
    <div>
      <Route path="/" component={App} />
    </div>
  </Router>
), document.getElementById('app'));

/client/component/App.js

import React from 'react';
import NavigationBar from './NavigationBar';

class App extends React.Component{
    render() {
        return(
            <div className="container">
                Hello World!
            </div> 
        );
    }

}

export default App;

webpack.config.dev.js

import path from 'path';
import webpack from 'webpack';

export default {
    devtool:'eval-source-map', 
    entry: [
        'webpack-hot-middleware/client',
        path.join(__dirname, '/client/index.js')
    ],
    output: {
        filename: 'bundle.js',
        path: '/',
        publicPath: '/'
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()

    ],  
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'client'),
                loaders: ['react-hot-loader', 'babel-loader', 'react-router-loader']
            }   
        ]
    },
    resolve: {
        extensions: [' ', '.js']
    }
}

.babelrc

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

package.json

  "name": "react-redux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "react-bootstrap": "^0.31.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "react-router-loader": "^0.5.4",
    "webpack": "^3.4.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.18.2"
  },
  "dependencies": {
    "express": "^4.15.3",
    "react": "^15.6.1",
    "react-loader": "^2.4.2",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2"
  }
}

Answer 1

从你的 package.json ，我看到你正在使用 webpack v3.4.1 。为此，您需要使用 module.rules 而不是 module.loaders 之类的

module: {
        rules: [
            {
                test: /\.js$/,
                include: path.join(__dirname, '/client'),
                use: ['react-hot-loader', 'babel-loader']
            }   
        ]
    },

参见 documentation 和 migration guide