_jsx is not defined in production mode

[Romej]

When I build my app in production mode, then I get :

ReferenceError: _jsx is not defined
    at e (index.tsx:35:5)
    at aa (react-dom.production.min.js:157:137)
    ...

However, everything is fine in development mode.

This is in the context of a CRA app migration.

Configuration :

// ...
export default defineConfig(({ env, command, envMode }) => {  
  return ({
  html: {
    template({ entryName }) {
      const templates = {
        index: './public/index.html',
        callWindow: './public/callWindow.html',
      };

      return templates[entryName] || './public/index.html';
    },
  },
  dev: {
    assetPrefix: 'auto',
  },
  output: {
    assetPrefix: 'auto',
    distPath: {
      root: 'build',
    },
    sourceMap: {
      js: 'source-map',
    },
  },
  plugins: [pluginReact(), pluginTypeCheck({ enable: false }), pluginSvgr({ mixedImport: true })],
  source: {
    define: {
      'process.platform': platform,
      'process.env': {
        ...publicVars,
      },
    },
    entry: {
      index: [path.resolve(__dirname, './src/index.tsx')],
      callWindow: [path.resolve(__dirname, './src/callWindow/index.tsx')],
    }
  }})
});

[9aoy]

@Romej Can you provide a minimal reproducible demo?

[Romej]

After investigation, the problem comes from the following code :

index.tsx

import React, { Suspense } from 'react';

import ReactDOM from 'react-dom';

const { ipcRenderer } = window.electron || {};

if (ipcRenderer) {
  const MyComponent = React.lazy(() => import('./MyComponent'));

  const Main = () => (
    <Suspense fallback={null}>
      <MyComponent />
    </Suspense>
  );

  ReactDOM.render(<Main />, document.getElementById('react-electron-window'));
}

MyComponent.tsx

import React from 'react';

const MyComponent = () => (
  <div>
    <h1>Hello World</h1>
  </div>
);

export default MyComponent;

Rsbuild seems to have an issue lazy loading the component when NODE_ENV=production, in the console we get the following error : https://react.dev/errors/130?invariant=130&args%5B%5D=null&args%5B%5D=

• NODE_ENV=development => the component gets rendered as expected
• Normal import (no lazy-load and no Suspense) => the component gets rendered as expected

[Romej]

This is no longer a problem in v1