【发布时间】：2022-01-13 20:28:26
【问题描述】：
我在使用 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"
}
}
.babelrc
{
"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>
谁能告诉我怎么了？
感谢您的帮助！
PS。我将 tsx 与 react/typescript 一起使用
【问题讨论】：
-
一方面，
index.html是<head>；你错过了<。其次，错误发生在您的 tsx 文件中，因此请使用该代码编辑您的答案。 -
我希望这实际上并不是您 index.html 中的全部内容。如果是，则表示您删除了一些内容。将您所拥有的与此样板示例进行比较 freecodecamp.org/news/… 具体来说，您可能缺少文档类型
-
@Bastiat 我正在编辑并放入整个 html 文件
-
好酷，所以，因为它是 bundle.js。那是您实际的 js 应用程序。尝试点击 bundle.js: 1 链接，看看实际的捆绑文件中是否有一些信息。
-
好的，你的 bundle.js 是 HTML。它必须是 JavaScript。 ;)
标签： javascript html reactjs typescript babeljs