Question

index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
      <link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
      <link rel="stylesheet" type="text/css" href="static/css/demo.css" />
      <link rel="stylesheet" type="text/css" href="static/css/component.css" />
      <link rel="stylesheet" type="text/css" href="static/css/game.css" />
      <!-- <link href="css/sb-admin-2.min.css" rel="stylesheet"> -->
      <link href="static/css/graph-cards.css" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <title>React App</title>
    </head>
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <body>
      <div id="root"></div>
    </body>
  </html>

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.4.1",
    "@amcharts/amcharts4-geodata": "^4.1.4",
    "history": "^4.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-radio-buttons": "^1.2.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "tachyons": "^4.11.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

index.js

  import React, { Suspense } from 'react';
  import ReactDOM from "react-dom";
  import 'tachyons';
  import { createBrowserHistory } from "history";
  import { Router, Route, Switch } from "react-router-dom";
  import indexRoutes from "routes/index";

  var hist = createBrowserHistory();

  ReactDOM.render(
    <Router history={hist}>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          {indexRoutes.map((prop, key) => {
            return <Route path={prop.path} key={key} component={prop.component} />;
          })}
        </Switch>
      </Suspense>
    </Router>,
    document.getElementById("root")
  );

这里我正在使用react的生产版本。我在控制台中遇到以下错误。

Uncaught SyntaxError: Unexpected token <
main.b6d3c706.chunk.js:1 Uncaught SyntaxError: Unexpected token <

我已经共享了index.html，index.js和package.json

我是否需要在webpack中更改其他配置。我已将src标记更改为“ text / babel”，但仍无法正常工作。

  import React from 'react';

  const Home = React.lazy(() => import('views/Home/Home'));


  var indexRoutes = [
    { path: "/", name: "Home", component: Home }
  ];

  export default indexRoutes;

请看看。

Answer 1

与您有同样的问题，我要做的就是这个

尝试在您的服务器上进行更改

const root = require("path").join(__dirname, "../build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

未捕获的SyntaxError：意外的令牌<main.b6d3c706.chunk.js：1

1 个答案: