如何仅在 Webpack bundle中包含 'react-dom/client' 时(即在 react-dom 18+ 中)？

Question

我正试图在一个库中编写代码，该库可与React 18和以前的版本一起工作，所以基本上

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
}

在React 16下，只会警告缺少模块，而不是错误。最好不要警告，但我可以接受。