使用webpack进行编译时出现反应错误

Question

I have the following:

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

when I run "npm start" based on my config:

var webpack = require('webpack');


module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ]

};

I get the following error:

./js/app.js
Module build failed: SyntaxError: /Users/alessandrosantese/Documents/PROJECTS/react-router-16/js/app.js: Unexpected token (10:6)
   8 |   render() {
   9 |     return (
> 10 |       <div className="nav">
     |       ^
  11 |         <Link to="app">Home</Link>
  12 |         <Link to="login">Login</Link>
  13 | 

Answer 1

I think you want both .js and .jsx to be run through react-hot and babel , but your pattern matches .j or .js (I think that you assumed that ? is a wildcard character, but in regular expressions it means "match the preceding expression 0 or 1 time" ).

Try this:

test: /\.jsx?$/

Answer 2

I would suggest you two changes.

First:

In your webpack with react-hot and babel loader you need to transpile jsx. So change your test to

{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },

To check for both .js and .jsx .

Second:

Instead of React.render() use ReactDOM.render() .

import React from 'react';  
import ReactDOM from 'react-dom';
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  ReactDOM.render(<Handler/>, document.body);
});