diff --git a/packages/umi/package.json b/packages/umi/package.json
index 19db963dd735..fcfec050890b 100644
--- a/packages/umi/package.json
+++ b/packages/umi/package.json
@@ -12,7 +12,7 @@
"dotenv": "8.0.0",
"is-windows": "1.0.2",
"lodash": "4.17.13",
- "react-loadable": "5.5.0",
+ "@umijs/react-loadable": "~1.0.0",
"resolve-cwd": "3.0.0",
"semver": "6.1.1",
"signale": "1.4.0",
diff --git a/packages/umi/src/dynamic.js b/packages/umi/src/dynamic.js
index b4a47e83f38b..23828cbd01ba 100644
--- a/packages/umi/src/dynamic.js
+++ b/packages/umi/src/dynamic.js
@@ -1,8 +1,8 @@
import React from 'react';
-import Loadable from 'react-loadable';
+import Loadable from '@umijs/react-loadable';
// Thanks to next.js
-// ref: https://github.com/zeit/next.js/blob/canary/lib/dynamic.js
+// ref: https://github.com/zeit/next.js/blob/a73fb5d04a90f03ec5b53225ffa19e84f9c7ab14/packages/next/next-server/lib/dynamic.tsx
export default function(dynamicOptions, options) {
let loadableFn = Loadable;
let loadableOptions = {
@@ -62,5 +62,9 @@ export default function(dynamicOptions, options) {
loadableOptions.loader = loadModules;
}
+ if (loadableOptions.getInitialProps) {
+ loadableFn.getInitialProps = loadableOptions.getInitialProps;
+ }
+
return loadableFn(loadableOptions);
}
diff --git a/packages/umi/test/dev.e2e.js b/packages/umi/test/dev.e2e.js
index cb98b5a1fa26..f2ab43348a96 100644
--- a/packages/umi/test/dev.e2e.js
+++ b/packages/umi/test/dev.e2e.js
@@ -278,4 +278,79 @@ describe('ssr', () => {
);
});
});
+
+ describe('ssr dynamicImport', () => {
+ const dynamicImportPort = 12344;
+ beforeEach(async () => {
+ // TODO: maybe using umi/server, reset global
+ global.window = {};
+ });
+
+ it('routes', async () => {
+ const ssrFile = join(
+ winPath(__dirname),
+ 'fixtures',
+ 'dev',
+ 'ssr-dynamicImport',
+ 'dist',
+ 'umi.server.js',
+ );
+ const manifestFile = join(
+ winPath(__dirname),
+ 'fixtures',
+ 'dev',
+ 'ssr-dynamicImport',
+ 'dist',
+ 'ssr-client-mainifest.json',
+ );
+ expect(existsSync(ssrFile)).toBeTruthy();
+ expect(existsSync(manifestFile)).toBeTruthy();
+
+ const serverRender = require('./fixtures/dev/ssr-dynamicImport/dist/umi.server');
+ const manifest = require('./fixtures/dev/ssr-dynamicImport/dist/ssr-client-mainifest.json');
+ // export react-dom/server to avoid React hooks ssr error
+ const { ReactDOMServer } = serverRender;
+
+ expect(manifest).toEqual({
+ '/': {
+ js: ['umi.js'],
+ css: ['umi.css'],
+ },
+ '/news': {
+ js: ['umi.js'],
+ css: ['umi.css'],
+ },
+ __404: {
+ js: ['umi.js'],
+ css: ['umi.css'],
+ },
+ });
+
+ const ctx = {
+ req: {
+ url: '/',
+ },
+ };
+
+ const { rootContainer } = await serverRender.default(ctx);
+ const ssrHtml = ReactDOMServer.renderToString(rootContainer);
+
+ expect(ssrHtml).toEqual(
+ '',
+ );
+
+ const ctx2 = {
+ req: {
+ url: '/news',
+ },
+ };
+
+ const { rootContainer: rootContainerNews } = await serverRender.default(ctx2);
+ const ssrHtmlNews = ReactDOMServer.renderToString(rootContainerNews);
+
+ expect(ssrHtmlNews).toContain(
+ 'Hello UmiJS SSR Styles
',
+ );
+ });
+ });
});
diff --git a/packages/umi/test/fixtures/dev/ssr-dynamicImport/.umirc.js b/packages/umi/test/fixtures/dev/ssr-dynamicImport/.umirc.js
new file mode 100644
index 000000000000..349be86fbd67
--- /dev/null
+++ b/packages/umi/test/fixtures/dev/ssr-dynamicImport/.umirc.js
@@ -0,0 +1,12 @@
+
+export default {
+ ssr: true,
+ plugins: [
+ ['../../../../../umi-plugin-react/lib/index.js', {
+ dva: false,
+ dynamicImport: {
+ webpackChunkName: true,
+ },
+ }],
+ ]
+}
diff --git a/packages/umi/test/fixtures/dev/ssr-dynamicImport/models/count.js b/packages/umi/test/fixtures/dev/ssr-dynamicImport/models/count.js
new file mode 100644
index 000000000000..de2addba5dbf
--- /dev/null
+++ b/packages/umi/test/fixtures/dev/ssr-dynamicImport/models/count.js
@@ -0,0 +1,17 @@
+export default {
+ state: 0,
+ reducers: {
+ add(state) {
+ return state + 1;
+ },
+ reset(state) {
+ return 0;
+ }
+ },
+ effects: {
+ *init({ type, payload }, { put, call, select }) {
+ yield put({ type: 'add' });
+ yield put({ type: 'add' });
+ },
+ },
+}
diff --git a/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/index.js b/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/index.js
new file mode 100644
index 000000000000..8045cd093b7d
--- /dev/null
+++ b/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/index.js
@@ -0,0 +1,19 @@
+import { Link } from 'umi';
+
+function App(props) {
+ return (
+
+ news
+
count: {props.count}
+
+ );
+}
+
+App.getInitialProps = async ({ store, route, isServer }) => {
+ console.log('Index getInitialProps');
+ return Promise.resolve({
+ count: 0,
+ });
+};
+
+export default App;
diff --git a/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/news.js b/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/news.js
new file mode 100644
index 000000000000..17de1a381eac
--- /dev/null
+++ b/packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/news.js
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'umi';
+
+function Page(props) {
+ const { list } = props;
+ return (
+
+
index
+
Page users
+
users
+
+ { (list || []).map(user => - {user}
) }
+
+