skip to Main Content

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

2

Answers


  1. 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!

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search