节点 ReactDOM.render 意外令牌'<'答案

【问题标题】：node ReactDOM.render Unexpected token '<'节点 ReactDOM.render 意外令牌'<'
【发布时间】：2021-07-06 05:44:12
【问题描述】：

我正在节点中设置一个反应项目，但在“node index.js”上出现以下错误

错误：

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'))
                ^

SyntaxError: Unexpected token '<'
[90m    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)[39m
[90m    at async link (internal/modules/esm/module_job.js:47:21)[39m

到目前为止我尝试了什么：

将节点版本降级到当前稳定版本。
在 package.json 中添加了"type": "module"

节点版本： v14.16.1

Package.json：

{
  "name": "react-routing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-router-dom": "^5.2.0"
  }
}

index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from "react-router-dom"
import App from "./components/App"


ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'))

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="root"></div>
    <script src="./index.js" type="text/jsx"></script>
</body>
</html>

【问题讨论】：

标签： javascript node.js reactjs typescript jsx

【解决方案1】：

node不知道jsx，需要用babel转译yow代码

【讨论】：