diff --git a/CHANGELOG.md b/CHANGELOG.md index 28e0f717da..e1bb1c303e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/LoadableComponentErrorBoundary/LoadableComponentErrorBoundary.js b/src/components/LoadableComponentErrorBoundary/LoadableComponentErrorBoundary.js index 5558ee03ae..3242557387 100644 --- a/src/components/LoadableComponentErrorBoundary/LoadableComponentErrorBoundary.js +++ b/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 + ) : ( + {children} + ); +}; +export default UseLoadableErrorBoundaryOnlyInProdutionMode;