Browser not calling the entry point in react bundle.js

Question

I have a relatively simple react app that has been working fine for the past few months in production.

After converting it from JavaScript to TypeScript, the main function (entry point) doesn't even run in the browser

• It appears to me that the browser loads the correct bundle.js, but doesn't run anything from it.

Here is the relevant fact pattern:

Compiling

• bundle.js is produced without errors
• bundle.js code looks okay to me (I ran it with devtool: 'source-map'. This is not a very reliable statement as I am no expert)

Browser

The browser seems to be able to load my bundle correctly (I don't see any error messages anywhere). Here's the html from the browser.

<div class="container">
    <br><br>
    <div id="requests-app" data-event-id="2" data-event-name="demo"></div>
    <script src="/static/js/react/requests.bundle.js"></script>
</div>

Main.tsx

This is my main function. The very first line 'Main component loaded', doesn't even get printed.

const Main: React.FC = () => {
    console.log('Main component loaded');

    const root = document.getElementById('requests-app') as HTMLElement | null;
    const appRoot = createRoot(root!);
  
    return (
      <EventTeamsContextProvider>
        <Requests />
      </EventTeamsContextProvider>
    );
};

Webpack

Here's how the entry point is defined in webpack config (worked fine when it used to be main.js)

entry: {
  Requests: './event_teams/requests_react/main.tsx',
}

and the loader.

    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'ts-loader',
          },
        },
      ],
    },

Where else should I be looking?

Answer 1

I am sure anyone who has ever created a functioning typescript react app would laugh at this question and answer. But leaving it here for any others who might be at a similar point in their journey.

Turns out that for my entry point, I have to simply write the code - not encapsulate it into a function or a functional component (I don't quite understand why the difference between jsx and tsx, but that's for wiser souls to comment on). Here's the updated code in main.tsx (note no main function):

const root = ReactDOM.createRoot(
  document.getElementById('requests-app') as HTMLElement
);

root.render(
  <EventTeamsContextProvider>
    <Requests />
  </EventTeamsContextProvider>
);