未捕获的语法错误：React 应用程序中出现意外的标记“<”

Question

我有反应应用程序的问题。 在启动应用程序时，我的 chrom 控制台中出现如下错误：

我不知道为什么，我几乎在每个主题中都遇到了这个错误，但没有任何帮助。 这是我的代码：

package.json

{
  "name": " ",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint": "eslint . --ext .ts"
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@babel/preset-typescript": "^7.16.7",
    "@types/jest": "^27.4.0",
    "@types/node": "^17.0.8",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.16.6",
    "axios": "^0.24.0",
    "babel-preset-react": "^6.24.1",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.0",
    "source-map-loader": "^3.0.1",
    "tailwind": "^4.0.0",
    "typescript": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/eslint-parser": "^7.16.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/babel-generator": "^6.25.5",
    "@typescript-eslint/parser": "^5.9.1",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "webpack": "^5.61.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-dev-server": "^4.7.1",
    "webpack-merge": "^5.8.0"
  }
}

.babelrc

{
  "presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]]
}

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using create-react-app" />

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>


  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <title> </title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>
</html>

有人可以告诉我出了什么问题吗？

谢谢你的帮助！

PS。 我将 tsx 与 react/typescript 一起使用

当我点击 bundle.js 1

Answer 1

我会尝试在您的浏览器中手动输入%YOUR_URL%/bundle.js 。

服务器可能会为您提供 404 HTML 页面，而不是预期的 JS 包。

未捕获的语法错误：React 应用程序中出现意外的标记“<”

问题描述

1 个解决方案

解决方案1
0 2022-01-13 20:34:56

未捕获的语法错误：React 应用程序中出现意外的标记“&lt;”

问题描述

1 个解决方案

解决方案1 0 2022-01-13 20:34:56

未捕获的语法错误：React 应用程序中出现意外的标记“<”

解决方案1
0 2022-01-13 20:34:56