未定义 < app.jsx。使用 react.js、反应路由器和 webpack

Question

我的头脑一直难以做出反应。我包含了 app.jsx 和 webpack 文件。我在 app.jsx 中的渲染函数中不断收到“<”错误。我在服务器端使用 node express。

这是错误：

apple$ webpack -w

Version: webpack 1.12.9
Time: 28ms
   [0] ./app/js/app.jsx 0 bytes [built] [failed]

ERROR in ./app/js/app.jsx
Module parse failed: /Users/apple/Desktop/cs360/myLdsCallings/app/js/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react'
| import render from 'react-dom'
| import Route from 'react-router'

这是 webpack 文件

var webpack = require('webpack')
var path = require('path')


module.exports = {

   devtool: 'inline-source-map',



    entry: "./app/js/app.jsx",
    output: {
        path: "./build",
        filename: "build.js"
    },
    module: { 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['es2015','react']
      }
}

}

app.jsx

import React from 'react'
import render from 'react-dom'
import Route from 'react-router'
import IndexRoute from 'react-router'
import Router from 'react-router'
import App from '../components/App'
import Current from '../components/Current'
import Actions from '../components/Actions'
import Dashboard from '../components/Dashboard'
import MyActions from '../components/MyActions'
import Without from '../components/Without'
import GlobalNav from '../components/GlobalNav'
import Profile from '../components/Profile'


var routes = (
  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={App} />
      <Route path='Current' component={Current} />
      <Route path='Dashboard' component={Dashboard} />
      <Route path='Actions' component={Actions} />
      <Route path='MyActions' component={MyActions} />
      <Route path='Without' component={Without} />
      <Route path='GlobalNav' component={GlobalNav} />
      <Route path='Profile' component={Profile} />
    </Route>
  </Router>
);


ReactDom.render(routes, document.getElementById('content')
)

Answer 1

文件存在多个问题：

module 对象内部应该有一个 loaders 数组，只有在那里你可以指定加载器。
（您已经修复）您使用的正则表达式不包括 jsx 文件，只包括 js 文件。
（也是固定的）对于 babel 6，您需要安装并指定加载程序的预设 - 在您的情况下，您使用 es2015 语法和 jsx.

这应该是上述所有修复的结果：

{ 
    test: /\.jsx?$/,  <--- note that we are testing for jsx and js files.
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['es2015', 'react']
      }
}

别忘了 npm install --save-dev babel-preset-react 和 npm install --save-dev babel-preset-es2015

未定义 < app.jsx。使用 react.js、反应路由器和 webpack

Undefined < in app.jsx. using react.js, react router and webpack

javascript

node.js

reactjs

webpack