diff --git a/packages/preset-umi/src/features/configPlugins/configPlugins.ts b/packages/preset-umi/src/features/configPlugins/configPlugins.ts index 2034004d5bef..5e83b65f1192 100644 --- a/packages/preset-umi/src/features/configPlugins/configPlugins.ts +++ b/packages/preset-umi/src/features/configPlugins/configPlugins.ts @@ -26,8 +26,11 @@ export default (api: IApi) => { cwd: api.cwd, dep: 'react-dom', }) || dirname(require.resolve('react-dom/package.json')); - const reactDOMVersion = require(join(reactDOMPath, 'package.json')).version; - const isLT18 = !reactDOMVersion.startsWith('18.'); + const isLT18 = (() => { + const reactDOMVersion = require(join(reactDOMPath, 'package.json')).version; + const majorVersion = parseInt(reactDOMVersion.split('.')[0], 10); + return majorVersion < 18; + })(); const configDefaults: Record = { alias: { umi: '@@/exports', diff --git a/packages/preset-umi/src/features/mpa/mpa.ts b/packages/preset-umi/src/features/mpa/mpa.ts index 18248f8e5c93..5cc8d08fc545 100644 --- a/packages/preset-umi/src/features/mpa/mpa.ts +++ b/packages/preset-umi/src/features/mpa/mpa.ts @@ -49,16 +49,16 @@ export default (api: IApi) => { ); } - const isReact18 = api.appData.react.version.startsWith('18.'); + const isGTEReact18 = api.appData.react.version.split('.')[0] >= 18; (api.appData.mpa!.entry as Entry[]).forEach((entry) => { const layout = entry.layout || api.config.mpa.layout; const layoutImport = layout ? `import Layout from '${layout}';` : ''; const layoutJSX = layout ? `` : ``; const rootElement = `document.getElementById('${entry.mountElementId}')`; - const renderer = isReact18 + const renderer = isGTEReact18 ? `ReactDOM.createRoot(${rootElement}).render(${layoutJSX});` : `ReactDOM.render(${layoutJSX}, ${rootElement});`; - const reactDOMSource = isReact18 ? 'react-dom/client' : 'react-dom'; + const reactDOMSource = isGTEReact18 ? 'react-dom/client' : 'react-dom'; api.writeTmpFile({ path: entry.tmpFilePath, noPluginDir: true,