Merge pull request #1429 from sharetribe/fix-loadablecomponenterrorbo…

…undary

Fix: LoadableComponentErrorBoundary should be used in prod, not in dev

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2020-XX-XX
 
+- [fix] LoadableComponentErrorBoundary should be used in prod, not in dev-mode with
+  hot-loading.[#1429](https://github.com/sharetribe/ftw-daily/pull/1429)
 - [fix] currency for Poland (PLN) [#1427](https://github.com/sharetribe/ftw-daily/pull/1427)
 
 ## [v8.1.0] 2021-03-11

src/components/LoadableComponentErrorBoundary/LoadableComponentErrorBoundary.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+
+import config from '../../config';
+
 import { LoadableComponentErrorBoundaryPage } from './LoadableComponentErrorBoundaryPage';
 
 // Use ErrorBoyndary to catch ChunkLoadError
@@ -23,4 +26,16 @@ class LoadableComponentErrorBoundary extends Component {
   }
 }
 
-export default LoadableComponentErrorBoundary;
+// LoadableComponentErrorBoundary helps in situations
+// where production build changes in the server and
+// long-living client app tries to fetch code chunks that don't exist anymore.
+// Note: in development mode with Hot Module Reloading (HMR) in use, this causes error loops.
+const UseLoadableErrorBoundaryOnlyInProdutionMode = props => {
+  const { children } = props;
+  return config.dev ? (
+    children
+  ) : (
+    <LoadableComponentErrorBoundary>{children}</LoadableComponentErrorBoundary>
+  );
+};
+export default UseLoadableErrorBoundaryOnlyInProdutionMode;