Tree-shaking optional require

[alexeyr-ci]

For compatibility with different React versions, our library uses

export const supportsRootApi = reactMajorVersion >= 18;

let reactDomClient: typeof import('react-dom/client');
if (supportsRootApi) {
  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
  // Unfortunately, it only converts the error to a warning.
  try {
    reactDomClient = require('react-dom/client') as typeof import('react-dom/client');
  } catch (_e) {
    // We should never get here, but if we do, we'll just use the default ReactDOM
    // and live with the warning.
    reactDomClient = ReactDOM as unknown as typeof import('react-dom/client');
  }
}

Only createRoot and hydrateRoot are used from react-dom/client. Is there a way to tell that to Webpack? E.g. would const { createRoot, hydrateRoot } = require('react-dom/client') tree-shake it? I know about the webpackExports magic comment, but according to the documentation it seems to be unsupported for require.

I also have seen #16872, but we can't use top-level await and I am not sure this would work:

let _createRoot;
let _hydrateRoot;

if (supportsRootApi) {
  import('react-dom/client').then({ createRoot, hydrateRoot }) => {
    _createRoot = createRoot;
    _hydrateRoot = hydrateRoot;
  });
}

// use _createRoot and _hydrateRoot in other functions

Another approach I thought of is separating into two files for React 18+ and React 16/17, since then we can just use non-dynamic import for both cases. But if I have react18impl.ts and react16impl.ts with the same exports, how do I properly re-export them so files which import them don't need to care about the React version?

if (supportsRootApi) {
  export = require('./react18impl');
} else {
  export = require('./react16impl');
}

in a .cts file maybe?

[alexander-akait]

Hello, unfortunately we don't support it for module.exports, only for named exports and react-dom/client itself using module.exports, why do not prebuild two files with new support and with old support and recommend to use different import for different server, like import ... from "my-pkg" and import ... from "my-pkg/old-react-dom" (just examples), maybe this will even allow the file size to be made smaller for use in the new version

[alexeyr-ci2]

That's not trivial because the file importing react-dom/client isn't exported directly but used by other files, and we can't just duplicate all of them with different imports :) There could be some kind of rewriting during the build process which ends up creating both versions, but it seems complicated to make work correctly.

OK, thank you!