ReactJs Module parse failed: Unexpected token (126:36) You may need an appropriate loader to handle this file type

I am using React 16 getting this error from yesterday. It is being caused by this line of code.

import * as Sentry from "@sentry/react";

The whole file is as below:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import registerServiceWorker from "./registerServiceWorker";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import * as Sentry from "@sentry/react";




ReactDOM.render(<App />, document.getElementById("root"));

Again I am using react 16 and this module is probably works for react 18 I am having a hard time understanding this error.

The config. set up page tells me to do this.

import { createRoot } React from "react-dom/client";
import React from "react";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "https://44248811178e430daa60c53720db7a66@o4505155680731136.ingest.sentry.io/4505155684794368",
  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
  // Performance Monitoring
  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />)

createRoot method is not available in react 16

i came across similar error's but those solutions didn't work. i also watched few youtube solutions even tried chatgpt didn't work.

Solution

I don't know exactly how your code looks like, but maybe this works.

Import

import { BrowserRouter } from 'react-router-dom';

Try to replace this:

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />)

with this:

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

OR replace 'app' with 'root'. It depends which id your main div has, where all the code will be written.