在app.jsx中未定義<。 使用react.js，React Router和Webpack

Question

我一直難以應付自己的反應。 我已經包含了app.jsx和webpack文件。 我在app.jsx的render函數中不斷出現'<'錯誤。 我在服務器端使用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

您在文件中遇到了多個問題：

1. module對象應該在內部有一個loaders數組，只有在那兒您才能指定加載器。
2. （已修復）您使用的正則表達式不包含jsx文件，而僅包含js文件。
3. （也已修復）使用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