Merge pull request #60 from xzyfer/infinite-loop

Prevent an infinite loop in browsers when an error happens in resolve

Author: ctrlplusb

commonjs/asyncComponent.js

@@ -221,19 +221,19 @@ function asyncComponent(config) {
             module = _state.module,
             error = _state.error;
 
+
+        if (error) {
+          return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
+        }
+
         // This is as workaround for React Hot Loader support.  When using
         // RHL the local component reference will be killed by any change
         // to the component, this will be our signal to know that we need to
         // re-resolve it.
-
         if (sharedState.module == null && !this.resolving && typeof window !== 'undefined') {
           this.resolveModule();
         }
 
-        if (error) {
-          return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
-        }
-
         var Component = es6Resolve(module);
         return Component ? _react2.default.createElement(Component, this.props) : LoadingComponent ? _react2.default.createElement(LoadingComponent, this.props) : null;
       }

src/__tests__/__snapshots__/asyncComponent.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`asyncComponent in a browser environment when an error occurs resolving a component should render the ErrorComponent 1`] = `
+<AsyncComponent>
+  <ErrorComponent
+    error={[Error: failed to resolve]}
+  >
+    <div>
+      failed to resolve
+    </div>
+  </ErrorComponent>
+</AsyncComponent>
+`;
+
+exports[`asyncComponent in a server environment when an error occurs resolving a component should render the ErrorComponent 1`] = `
+<AsyncComponent>
+  <ErrorComponent
+    error={[Error: failed to resolve]}
+  >
+    <div>
+      failed to resolve
+    </div>
+  </ErrorComponent>
+</AsyncComponent>
+`;

src/__tests__/asyncComponent.test.js

@@ -22,4 +22,63 @@ describe('asyncComponent', () => {
       setTimeout(resolve, resolveDelay + 10),
     ).then(() => expect(setStateSpy.callCount).toEqual(1))
   })
+
+  describe('in a browser environment', () => {
+    let oldWindow
+    beforeAll(() => {
+      oldWindow = window
+      global.window = {}
+    })
+    afterAll(() => {
+      global.window = oldWindow
+    })
+    describe('when an error occurs resolving a component', () => {
+      it.only('should render the ErrorComponent', () => {
+        const resolveDelay = 10
+        const Bob = asyncComponent({
+          resolve: () =>
+            new Promise((resolve, reject) =>
+              setTimeout(
+                () => reject(new Error('failed to resolve')),
+                resolveDelay,
+              ),
+            ),
+          ErrorComponent: ({ error }) => <div>{error.message}</div>,
+        })
+        const renderWrapper = mount(<Bob />)
+        return new Promise(resolve =>
+          setTimeout(resolve, resolveDelay + 100),
+        ).then(() => expect(renderWrapper).toMatchSnapshot())
+      })
+    })
+  })
+  describe('in a server environment', () => {
+    let oldWindow
+    beforeAll(() => {
+      oldWindow = window
+      global.window = undefined
+    })
+    afterAll(() => {
+      global.window = oldWindow
+    })
+    describe('when an error occurs resolving a component', () => {
+      it('should render the ErrorComponent', () => {
+        const resolveDelay = 10
+        const Bob = asyncComponent({
+          resolve: () =>
+            new Promise((resolve, reject) =>
+              setTimeout(
+                () => reject(new Error('failed to resolve')),
+                resolveDelay,
+              ),
+            ),
+          ErrorComponent: ({ error }) => <div>{error.message}</div>,
+        })
+        const renderWrapper = mount(<Bob />)
+        return new Promise(resolve =>
+          setTimeout(resolve, resolveDelay + 50),
+        ).then(() => expect(renderWrapper).toMatchSnapshot())
+      })
+    })
+  })
 })

src/asyncComponent.js

@@ -176,6 +176,12 @@ function asyncComponent(config) {
     render() {
       const { module, error } = this.state
 
+      if (error) {
+        return ErrorComponent ? (
+          <ErrorComponent {...this.props} error={error} />
+        ) : null
+      }
+
       // This is as workaround for React Hot Loader support.  When using
       // RHL the local component reference will be killed by any change
       // to the component, this will be our signal to know that we need to
@@ -188,12 +194,6 @@ function asyncComponent(config) {
         this.resolveModule()
       }
 
-      if (error) {
-        return ErrorComponent ? (
-          <ErrorComponent {...this.props} error={error} />
-        ) : null
-      }
-
       const Component = es6Resolve(module)
       return Component ? (
         <Component {...this.props} />

umd/react-async-component.js

@@ -482,19 +482,19 @@ function asyncComponent(config) {
             module = _state.module,
             error = _state.error;
 
+
+        if (error) {
+          return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
+        }
+
         // This is as workaround for React Hot Loader support.  When using
         // RHL the local component reference will be killed by any change
         // to the component, this will be our signal to know that we need to
         // re-resolve it.
-
         if (sharedState.module == null && !this.resolving && typeof window !== 'undefined') {
           this.resolveModule();
         }
 
-        if (error) {
-          return ErrorComponent ? _react2.default.createElement(ErrorComponent, _extends({}, this.props, { error: error })) : null;
-        }
-
         var Component = es6Resolve(module);
         return Component ? _react2.default.createElement(Component, this.props) : LoadingComponent ? _react2.default.createElement(LoadingComponent, this.props) : null;
       }