Uncaught SyntaxError: missing ) after argument list in React

Question

I used vite for creating a React-typescript project, and I got a blank page with the error :

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

in 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>
);

the error has explained in :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list

But it's not similar to my problem

Check for syntax errors in other files, sometimes the error is reported in weird places — Ou Tsei, Jun 29 '23 at 14:02
please provide https://codesandbox.io/ so that we able to check and run. — trysetyoutomo, Jun 29 '23 at 14:41
Are you sure it's being compiled as TypeScript? That's right at the point you try to use `as`. — Dave Newton, Jun 29 '23 at 14:52

score 0 · Accepted Answer · answered Jun 29 '23 at 14:09

Given the location of the error, seems it could be due to having Typescript improperly set up. If you haven't already, try using one of Vite's "create" scripts to set up the project as show in https://vitejs.dev/guide/#scaffolding-your-first-vite-project,

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

Make sure to select a Typescript template such as react-ts in the example above.

score -1 · Answer 2 · answered Jun 29 '23 at 14:06

It seems that you're using an incorrect import statement for the ReactDOM module. Instead of importing from "react-dom/client", you should import from "react-dom". I've never seen that kind of import ever.

Here's the corrected code:

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>
 );

Make sure to update the import statement for ReactDOM, and try running your project again. This should resolve the "missing ) after argument list" error and render your React app correctly.

Hope this works!

I don't think this helps. [React v18 says to use `react-dom/client`](https://react.dev/learn/add-react-to-an-existing-project) — evolutionxbox, Jun 29 '23 at 14:08
true, he should chekc out this answer here https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18 it could solve his problem — IceCold, Jun 29 '23 at 14:12

Uncaught SyntaxError: missing ) after argument list in React

2 Answers2