Question

我一直试图弄清楚这一天，并不太明白发生了什么。使用npm start时使用以下配置，它不会在控制台中抛出任何异常，但是当我在chrome中查看它时，我得到“Uncaught SyntaxError：Unexpected token＆lt;”

以下是我的配置文件，非常感谢任何指针。到目前为止，我已经尝试使用npm install babel-core babel-loader babel-preset-react babel-preset-es2015而且那些都没有帮助......

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './jsx/App.jsx';


ReactDOM.render(
    <App/>,
document.getElementById('app'));

的package.json

{
 "name": "whatever",
 "version": "1.0",
 "description": "none",
 "main": "main.js",
 "scripts": {
    "start": "webpack-dev-server --hot"
 },
 "author": "Garrett",
 "license": "ISC",
 "dependencies": {
   "react": "^15.6.1",
   "react-dom": "^15.6.1",
   "react-router": "^3.0.0",
   "webpack": "^2.2.0",
   "webpack-dev-server": "^1.16.5"
 },
 "devDependencies":{
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "css-loader": "^0.26.1",
   "eslint": "^3.10.2",
   "eslint-config-standard": "^6.2.1",
   "eslint-plugin-promise": "^3.3.2",
   "eslint-plugin-react": "^6.7.1",
   "eslint-plugin-standard": "^2.0.1",
   "json-loader": "^0.5.4",
   "style-loader": "^0.13.1",
   "webpack": "2.2.0",
   "webpack-dev-server": "^1.16.5"
  }
 }

webpack.config.js

  var config = {
    entry: './main.js',

    output: {
        path:'./',
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
               }
          },
            {test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.json$/, loader: 'json-loader'}
        ]
    }
 };

 module.exports = config;

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';

//Page Imports
import Home from './pages/Home.jsx';
import p404 from './pages/p404.jsx';

import Content from './Content.jsx';

var css = require("../css/index.css");

class App extends React.Component{
    constructor(){
        super();
    }
    render(){
        return(
        <div>
            <Router history={hashHistory}>
                <Route path="/" component={Content}>
                    <IndexRoute component={Home}></IndexRoute>
                    <Route path="home" component={Home}></Route>
                    <Route path="404" component={p404}></Route>
                    <Route path="*" component={p404} />
                </Route>
            </Router>
        </div>
        );  
    }
}

export default App;

如果您需要更多信息我可以提供，请提前感谢任何可以帮助我的人。

Answer 1

看起来你正在使用webpack 1配置，而你正在使用webpack 2，更具体地说：

你的“加载器”数组应该是“规则”，“查询”应该是“选项”，例如：

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            options: {
                presets: ['es2015', 'react']
           }
      },
        {test: /\.css$/, loader: 'style-loader!css-loader' },
        {test: /\.json$/, loader: 'json-loader'}
    ]
}

另外，你需要安装babel-loader和babel-core（你提到你安装了它们，但它们不在你的package.json中）

意外的标记'＆lt;'在Chrome中为react.js

1 个答案: