reactjselectroncreateelement

Why would ReactDOMServer.renderToString(createElement(SomeComponent)) fail without an error message in an ElectronJS app's main process?

preamble: this question was rewritten in the light of Estus Flask's message below (where I have also added a fix, if not an answer)

In an Electron app I have this simple React component

const TestComp = () => <div>test component</div>;

export default TestComp;

and the following ipc listener in the app's main.ts file

ipcListener.handle('RENDER_TEST_COMP', async () => {
  try {
    const testComp = createElement(TestComp);
    const htmlOutput = ReactDOMServer.renderToString(testComp);
  } catch (error) {
    global.log('Error creating html output', error);
  }
});

This errors every time but the log files have no error message

[TimeStamp here] ERROR!
Error creating html output

The error occurs in renderToString() not createElement(). Why is it silent? Or more importanly, how can I get it to speak up?

Solution

  • Why the error is silent in log files remains a mystery but running a debugger* showed that React was undefined in the rendering process. Since React 17 is has not been required to import React in your JSX files. However it transpires this is not the case if you are rendering your JSX elements via the following functions in the main process of an Electron app.

    ReactDOMServer.renderToString(createElement(SomeComponent));

    In which case simply add the following to your JSX files

    import React from 'react';

    *- specifically, Run and Debug process in VSCode with the config set-up recommended by the electron-vite docs