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

wvt8vs2t 于 2022-12-16 发布在 Babel

关注(0)|答案(1)|浏览(143)

我有一个React应用程序的问题。在启动应用程序我;我在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"
  }
}

巴伯尔

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

index.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>

谁能告诉我出什么事了？
谢谢你的帮助！
附言：我使用的是带有react/typescript的tsx
1.当我点击bundle.js 1