只有在Webpack包存在的情况下，我才能将“react/client”包含在内(即react dom 18+)？

Question

我试图在一个库中编写代码，它可以同时使用Reactive18和以前的版本，所以基本上

const reactMajorVersion = parseInt(ReactDOM.version.split('.')[0], 10);

if (reactMajorVersion >= 18) {
  const ReactDOMClient = require('react-dom/client');
  // use ReactDOMClient.createRoot
} else {
  // use ReactDOM.render
}

问题是，图书馆需要与Webpack合作(5，以防这件事)。因此，如果代码中有require('react-dom/client')，Webpack解析器会尝试将它包含在包中，而在以前的React版本中，它会失败。

我试着解决这个问题

const reactDOMContext = require.context('react-dom', false, /client\.js$/);
const ReactDOMClient = reactDomContext('react-dom/client.js');

但是这似乎没有像预期的那样包含文件:如果我使用npx webpack --stats verbose运行，我看到

      modules by path ./node_modules/react-dom/*.js 1.97 KiB
        ./node_modules/react-dom/index.js 1.33 KiB {vendors-node_modules_core-js_modules_es_aggregate-error_js-node_modules_core-js_modules_es_pr-0459f6} [depth 2] [dependent] [built] [code generated]
          [exports: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, createRoot, findDOMNode, flushSync, hydrate, hydrateRoot, render, unmountComponentAtNode, unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version]
          [used exports unknown]
          from origin ./client/app/startup/ClientReduxApp.jsx
            harmony side effect evaluation react-dom [./client/app/startup/ClientReduxApp.jsx] 11:0-33
            harmony import specifier react-dom [./client/app/startup/ClientReduxApp.jsx] 23:33-49
            harmony import specifier react-dom [./client/app/startup/ClientReduxApp.jsx] 23:52-67
          from origin ./client/app/startup/ClientReduxSharedStoreApp.jsx
            harmony side effect evaluation react-dom [./client/app/startup/ClientReduxSharedStoreApp.jsx] 9:0-33
            harmony import specifier react-dom [./client/app/startup/ClientReduxSharedStoreApp.jsx] 18:33-49
            harmony import specifier react-dom [./client/app/startup/ClientReduxSharedStoreApp.jsx] 18:52-67
          from origin ./client/app/startup/ManualRenderAppRenderer.jsx
            harmony side effect evaluation react-dom [./client/app/startup/ManualRenderAppRenderer.jsx] 5:0-33
            harmony import specifier react-dom [./client/app/startup/ManualRenderAppRenderer.jsx] 7:33-49
            harmony import specifier react-dom [./client/app/startup/ManualRenderAppRenderer.jsx] 7:52-67
          from origin ./node_modules/react-redux/es/utils/reactBatchedUpdates.js
            harmony side effect evaluation react-dom [./node_modules/react-redux/es/utils/reactBatchedUpdates.js] 2:0-52
            harmony export imported specifier react-dom [./node_modules/react-redux/es/utils/reactBatchedUpdates.js] 2:0-52
          cjs require react-dom [./node_modules/react-on-rails/node_package/lib/clientStartup.js] 12:34-54
          cjs require react-dom [./node_modules/react-on-rails/node_package/lib/reactHydrateOrRender.js] 7:34-54
        ./node_modules/react-dom/server.browser.js 658 bytes {vendors-node_modules_core-js_modules_es_aggregate-error_js-node_modules_core-js_modules_es_pr-0459f6} [depth 3] [dependent] [built] [code generated]
          [exports: renderToNodeStream, renderToReadableStream, renderToStaticMarkup, renderToStaticNodeStream, renderToString, version]
          [used exports unknown]
          cjs require react-dom/server [./node_modules/react-on-rails/node_package/lib/handleError.js] 7:31-58
          cjs require react-dom/server [./node_modules/react-on-rails/node_package/lib/serverRenderReactComponent.js] 42:31-58

和

  ../../node_modules/react-dom/ sync nonrecursive client\.js$ [../../node_modules/react-dom sync client\.js$] 160 bytes {server-bundle} [depth 3] [dependent] [built] [code generated]
    [no exports]
    [used exports unknown]
    require.context [./node_modules/react-on-rails/node_package/lib/reactHydrateOrRender.js] 18:30-80

(为什么它使用的是../../node_modules而不是./node_modules?)

Answer 1

try {
  ReactDOMClient = require('react-dom/client');
} catch (e) {
  // do nothing
}

将只对缺少模块发出警告在反应下16，而不是错误。最好是避免警告，但我可以接受。