[WIP] fix: dynamicImport getInitialProps can't work in ssr

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",

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);
 }

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(
+        '<div class="wrapper" data-reactroot=""><h1>Hello UmiJS SSR Styles</h1><ul><li>Alice</li><li>Jack</li><li>Tony</li></ul><button>0</button></div>',
+      );
+
+      const ctx2 = {
+        req: {
+          url: '/news',
+        },
+      };
+
+      const { rootContainer: rootContainerNews } = await serverRender.default(ctx2);
+      const ssrHtmlNews = ReactDOMServer.renderToString(rootContainerNews);
+
+      expect(ssrHtmlNews).toContain(
+        '<div class="news" data-reactroot=""><h1>Hello UmiJS SSR Styles</h1></div>',
+      );
+    });
+  });
 });

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,
+      },
+    }],
+  ]
+}

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' });
+    },
+  },
+}

packages/umi/test/fixtures/dev/ssr-dynamicImport/pages/index.js

@@ -0,0 +1,19 @@
+import { Link } from 'umi';
+
+function App(props) {
+  return (
+    <div>
+      <Link to="/news">news</Link>
+      <h1>count: {props.count}</h1>
+    </div>
+  );
+}
+
+App.getInitialProps = async ({ store, route, isServer }) => {
+  console.log('Index getInitialProps');
+  return Promise.resolve({
+    count: 0,
+  });
+};
+
+export default App;

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 (
+    <div>
+      <Link to="/">index</Link>
+      <h1>Page users</h1>
+      <h2>users</h2>
+      <ul>
+        { (list || []).map(user => <li key={user}>{user}</li>) }
+      </ul>
+    </div>
+  );
+}
+
+Page.getInitialProps = async () => {
+  console.log('Users getInitialProps');
+  return Promise.resolve({
+    list: ['foo', 'bar'],
+  });
+};
+
+export default Page;