Fixed lazy usage with Suspense and Error Boundary together

packages/component/src/createLoadable.js

@@ -156,7 +156,7 @@ function createLoadable({ resolve = identity, render, onLoad }) {
             .then(loadedModule => {
               const result = resolve(loadedModule, { Loadable })
               if (options.suspense) {
-                this.setCache(result)
+                this.setCache({ result })
               }
               this.safeSetState(
                 {
@@ -167,6 +167,9 @@ function createLoadable({ resolve = identity, render, onLoad }) {
               )
             })
             .catch(error => {
+              if (options.suspense) {
+                this.setCache({ error })
+              }
               this.safeSetState({ error, loading: false })
             })
         }
@@ -183,13 +186,15 @@ function createLoadable({ resolve = identity, render, onLoad }) {
         } = this.props
         const { error, loading, result } = this.state
 
-        if (options.suspense) {
-          const cachedResult = this.getCache()
-          if (!cachedResult) throw this.loadAsync()
+        if (options.suspense && !this.promise) {
+          const cachedResponse = this.getCache()
+          if (!cachedResponse) throw this.loadAsync()
+          if (cachedResponse.error) throw cachedResponse.error
+
           return render({
             loading: false,
             fallback: null,
-            result: cachedResult,
+            result: cachedResponse.result,
             options,
             props: { ...props, ref: forwardedRef },
           })

packages/component/src/loadable.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 /* eslint-disable import/no-extraneous-dependencies, react/no-multi-comp */
 import 'regenerator-runtime/runtime'
 import '@testing-library/jest-dom/extend-expect'
@@ -29,6 +30,27 @@ class Catch extends React.Component {
   }
 }
 
+class ErrorBoundary extends React.Component {
+  state = {
+    error: false,
+  }
+
+  componentDidCatch() {
+    this.setState({ error: true })
+  }
+
+  render() {
+    const { children, fallback } = this.props
+    const { error } = this.state
+
+    if (error) {
+      return fallback || null
+    }
+
+    return children || null
+  }
+}
+
 describe('#loadable', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => {})
@@ -212,6 +234,21 @@ describe('#lazy', () => {
     load.resolve({ default: () => 'loaded' })
     await wait(() => expect(container).toHaveTextContent('loaded'))
   })
+
+  it('supports Error Boundary', async () => {
+    const load = createLoadFunction()
+    const Component = lazy(load)
+    const { container } = render(
+      <ErrorBoundary fallback="error">
+        <React.Suspense fallback="progress">
+          <Component />
+        </React.Suspense>
+      </ErrorBoundary>,
+    )
+    expect(container).toHaveTextContent('progress')
+    load.reject(new Error('Error Boundary'))
+    await wait(() => expect(container).toHaveTextContent('error'))
+  })
 })
 
 describe('#loadable.lib', () => {
@@ -242,6 +279,21 @@ describe('#lazy.lib', () => {
     const library = { it: 'is', a: 'lib' }
     load.resolve(library)
     await wait(() => expect(container).toHaveTextContent('loaded'))
-    expect(container).toHaveTextContent('loaded')
+  })
+
+  it('supports Error Boundary', async () => {
+    const load = createLoadFunction()
+    const Lib = lazy.lib(load)
+    const renderFn = jest.fn(() => 'loaded')
+    const { container } = render(
+      <ErrorBoundary fallback="error">
+        <React.Suspense fallback="progress">
+          <Lib>{renderFn}</Lib>
+        </React.Suspense>
+      </ErrorBoundary>,
+    )
+    expect(container).toHaveTextContent('progress')
+    load.reject(new Error('Error Boundary'))
+    await wait(() => expect(container).toHaveTextContent('error'))
   })
 })