Question

所以我正在尝试关注React的this教程（后来我将通过认证和PostgreSQL集成）。我已经注意到他的反应路由器已经过时，因此使用了最高评论来解决这个问题。但是，在react-router-loader文件中安装webpack.config.js后，我收到以下错误：

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

Answer 2

在你的/client/index.js中，“render”方法来自哪里？你有没有从ReactDOM导入它？另外，我认为你可能还有一个额外的括号：

render((

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

2 个答案: