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?