React Express Webpack意外令牌＆lt;

Question

我一直试图为我的朋友youtube频道创建一个论坛。当我尝试进行注册后发布操作时，我的注册表单组件没有加载，我在控制台中收到一条错误，说“＆＃34; Unexpected Token＆lt;＆＃34;”。我也使用webpack和redux-minimal样板。

SU.js（注册）：

import React from 'react';

export default class SU extends React.Component
{
    render()
    {
        return(
            <form action='/su' method='post'>
                <p>Username:</p>
                <input type='text' name='u' />
                <p>Password:</p>
                <input type='text' name='p' />
                <p>Email:</p>
                <input type='text' name='e' />
                <input type='submit' value='Register'/>
            </form>
        );
    }
}

Server.js：

const express = require('express');
const mg = require('mongoose');
const bp = require('body-parser');

app.use(bp.json());
app.use(bp.urlencoded({extended: true}));


mg.connect('mongodb://localhost/cancersquad/users');


// http://expressjs.com/en/4x/api.html
const app = express();
const port = process.env.PORT || 3000;
const public_path = express.static(__dirname + '/public');
const index_path = __dirname + '/public/index.html';

app.use(public_path);
app.get('*', function (request, response) {
  response.sendFile(index_path, function (error) {
    if (error) {
      console.log(error);
    }
  });
});

const users = mg.Schema({
  username: String,
  password: String,
  email: String
});

const user = mg.model('user', users); 

app.post('/su', function(req,res){
  var newUser = new user({
    username: req.body.u,
    password: req.body.p,
    email: req.body.e
  })
});

app.listen(port);
console.log("Listening at http://localhost:" + port);

webpack.config.js：

// http://webpack.github.io/docs/configuration.html
// http://webpack.github.io/docs/webpack-dev-server.html
var app_root = 'src'; // the app root folder: src, src_users, etc
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  app_root: app_root, // the app root folder, needed by the other webpack configs
  entry: [
    'babel-polyfill',
    __dirname + '/' + app_root + '/index.js',
  ],
  output: {
    path: __dirname + '/public/js',
    publicPath: 'js/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/,
      },
      {
        // https://github.com/jtangelder/sass-loader
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
      }
    ],
  },
  devServer: {
    contentBase: __dirname + '/public',
  },
  plugins: [
    new CleanWebpackPlugin(['css/main.css', 'js/bundle.js'], {
      root: __dirname + '/public',
      verbose: true,
      dry: false, // true for simulation
    }),
  ],
};

的package.json：

{
  "name": "redux-minimal",
  "version": "1.0.0",
  "description": "Start building complex react-redux apps today, with this minimalist easy to understand starter kit (boilerplate)",
  "keywords": [
    "react",
    "redux",
    "minimal",
    "starter kit",
    "boilerplate"
  ],
  "main": "index.js",
  "homepage": "http://redux-minimal.js.org/",
  "repository": {
    "type": "git",
    "url": "https://github.com/catalin-luntraru/redux-minimal"
  },
  "scripts": {
    "start": "concurrently \"webpack --watch --config webpack.dev.config.js\" \"node server.js\"",
    "start-prod": "concurrently \"webpack --watch --config webpack.prod.config.js\" \"node server.js\"",
    "test": "mocha --recursive --compilers js:babel-register --require babel-polyfill --require ignore-styles",
    "test-watch": "npm test -- --watch"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-3"
    ]
  },
  "author": "Catalin Luntraru",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.17.2",
    "express": "^4.14.0",
    "mongoose": "^4.10.5",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "react-router-bootstrap": "^0.23.1",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-form": "^6.4.3",
    "redux-saga": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-polyfill": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.17.0",
    "babel-runtime": "^6.20.0",
    "clean-webpack-plugin": "^0.1.15",
    "concurrently": "^3.1.0",
    "css-loader": "^0.26.1",
    "enzyme": "^2.7.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "ignore-styles": "^5.0.1",
    "mocha": "^3.2.0",
    "node-sass": "^4.3.0",
    "parallelshell": "^2.0.0",
    "react-addons-test-utils": "^15.4.2",
    "redux-freeze": "^0.1.5",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "whatwg-fetch": "^2.0.1"
  }
}