模塊構建失敗：SyntaxError：C：/…/main.jsx：意外令牌

Question

我已經在一個問題上停留了幾個小時了。 每當我嘗試運行WebPack時，都會在提示<的地方給我模塊編譯錯誤。 我已經在該站點和其他站點上嘗試了許多解決方案，但仍然無法解決。 任何幫助，將不勝感激。

main.js

import Main from './main.jsx';

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';

class Nav extends React.Component {
  render() {
    return {
      <div>hello</div>
    }
  }
}

class App extends React.Compnent {
  render() {
    return {
      <div>
        <Nav />
      </div>
    }
  }
}

ReactDOM.render (
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("mainContent")
);

webpack.config.js

const path = require('path');

module.exports = {
    entry: './js/main.js',
    output: {
        path: path.resolve(__dirname, 'docs'),
        filename: 'file.js'
    },
    devServer: {
      contentBase: path.join(__dirname, "docs"),
      port: 9000
    },
    module: {
      loaders: [
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
        ]
    },
};

也嘗試過

    module: {
      loaders: [
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ , query: {presets:['es2015', 'react']} },
        ]

package.json

{
  "name": "connectthrumusic",
  "version": "1.0.0",
  "description": "Shows the location of people around the world that are listening to the same song at the same time and allows you to chat with them.",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/andrew2chan/ConnectThruMusic.git"
  },
  "author": "Andrew Chan",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/andrew2chan/ConnectThruMusic/issues"
  },
  "homepage": "https://github.com/andrew2chan/ConnectThruMusic#readme",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "webpack-dev-server": "^2.11.1"
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ConnectThruMusic</title>
</head>
<body>
<div id="mainContent"></div>
<script src="file.js" type="text/javascript"></script>
</body>
</html>

.babelrc

{
    "presets": ["env", "react", "es2015"]
}

錯誤

檔案

Answer 1

只是（）而不是{}。 感謝Sterling Archer指出這一點。

模塊構建失敗：SyntaxError：C：/…/main.jsx：意外令牌

問題描述

1 個解決方案

解決方案1
0 已采納 2018-01-31 21:39:18

模塊構建失敗：SyntaxError：C：/…/main.jsx：意外令牌

問題描述

1 個解決方案

解決方案1 0 已采納 2018-01-31 21:39:18

解決方案1
0 已采納 2018-01-31 21:39:18