Fix sync resolution (#651)

* chore(tests): make breaking case for webpack4

* fix: loadableReady should not resolve synchronously, fixes #634

* chore(size): commit size change

examples/webpack/webpack4/package.json

@@ -7,7 +7,8 @@
     "build:webpack": "webpack",
     "build:lib": "babel -d lib src",
     "start": "NODE_ENV=production node lib/server/main.js",
-    "start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js"
+    "start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js",
+    "update": "rm ./node_modules/.yarn-integrity && yarn"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

examples/webpack/webpack4/src/client/App.js

@@ -3,6 +3,10 @@ import loadable from '@loadable/component'
 
 const X = loadable(props => import(`./letters/${props.letter}`))
 
+const ClientSideOnly = loadable(props => import(`./letters/${props.letter}`), {
+  ssr: false,
+})
+
 const Moment = loadable.lib(() => import('moment'), {
   resolveComponent: moment => moment.default || moment,
 })
@@ -12,6 +16,12 @@ const App = () => (
     <p>
     Lazy load letter A:<X letter="A" />
     </p>
+    <p>
+      Lazy load letter C:<X letter="B" />
+    </p>
+    <p>
+      Lazy load letter only on Client C:<ClientSideOnly letter="C" />
+    </p>
     <p>
       lazy load momentjs:
       <Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>

examples/webpack/webpack4/src/client/letters/B.js

@@ -0,0 +1,3 @@
+const B = () => 'Lazy-Letter-B'
+
+export default B

examples/webpack/webpack4/src/client/letters/C.js

@@ -0,0 +1,3 @@
+const C = () => 'Lazy-Letter-C'
+
+export default C

examples/webpack/webpack4/src/server/main.js

@@ -7,12 +7,18 @@ import { ChunkExtractor } from '@loadable/server'
 const app = express();
 
 // https://github.com/gregberge/loadable-components/issues/634
-app.use('*/runtime~main.js', async (req, res, next) => {
+app.use('*/runtime~main*.js', async (req, res, next) => {
   console.log('delaying runtime chunk');
   await new Promise(resolve => setTimeout(resolve, 2000));
   next();
 });
 
+app.use('*/letters*.js', async (req, res, next) => {
+  console.log('delaying letters chunk');
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  next();
+});
+
 app.use(express.static(path.join(__dirname, '../../public')))
 
 if (process.env.NODE_ENV !== 'production') {

examples/webpack/webpack5/package.json

@@ -7,7 +7,8 @@
     "build:webpack": "webpack",
     "build:lib": "babel -d lib src",
     "start": "NODE_ENV=production node lib/server/main.js",
-    "start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js"
+    "start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js",
+    "update": "rm ./node_modules/.yarn-integrity && yarn"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

packages/component/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 16361,
-    "minified": 7300,
-    "gzipped": 2563
+    "bundled": 16354,
+    "minified": 7304,
+    "gzipped": 2565
   },
   "dist/loadable.esm.js": {
-    "bundled": 15982,
-    "minified": 6996,
-    "gzipped": 2497,
+    "bundled": 15975,
+    "minified": 7000,
+    "gzipped": 2495,
     "treeshaked": {
       "rollup": {
         "code": 276,

packages/component/src/loadableReady.js

@@ -62,7 +62,6 @@ export default function loadableReady(
         if (!resolved) {
           resolved = true
           resolve()
-          done()
         }
       }
     }
@@ -73,5 +72,5 @@ export default function loadableReady(
     }
 
     checkReadyState()
-  })
+  }).then(done);
 }