typescript 未捕获的语法错误:在React中的参数列表之后

uxhixvfz  于 2023-06-30  发布在  TypeScript
关注(0)|答案(2)|浏览(163)

我使用vite创建了一个React-typescript项目,得到了一个空白页面,上面有错误:

Uncaught SyntaxError: missing ) after argument list (at main.tsx:6:51)

在main.tsx中:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
   <App />
  </React.StrictMode>
);

该错误的解释如下:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
但这和我的问题不一样

x8diyxa7

x8diyxa71#

考虑到错误的位置,似乎可能是由于Typescript设置不正确。如果您还没有,请尝试使用Vite的“create”脚本之一来设置项目,如https://vitejs.dev/guide/#scaffolding-your-first-vite-project中所示,

yarn create vite my-app --template react-ts

确保选择Typescript模板,如上面示例中的react-ts。

tyu7yeag

tyu7yeag2#

看起来你对ReactDOM模块使用了不正确的import语句。而不是从“react-dom/client”导入,您应该从“react-dom”导入。我从没见过这么重要的东西。
下面是正确的代码:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as 
   HTMLElement).render(
   <React.StrictMode>
    <App />
   </React.StrictMode>
 );

确保更新ReactDOM的import语句,并尝试再次运行项目。这应该可以解决“missing)after argument list”错误,并正确呈现您的React应用。
希望这个工作!

相关问题