Reaction Router code separation “accidentally” is not performed when loading pieces

Question

I am struggling with a problem with the action-router + webpack split + servicer worker (or cache) handler.

Basically the problem is this: code separation works fine, but from time to time I get error reports from clients in sentry.io, for example:

"Dynamic page loading failed Error: Loading chunk 19 failed."

My reaction-router code is as follows:

const errorLoading = (err) => {
    console.error('Dynamic page loading failed', err);
};

export default (
    <Route path="/" component={App}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then((module) => { cb(null, module.default); })
                    .catch(errorLoading);
            }}
        />
    </Route>
);

For my ServiceWorker, I am using OfflinePlugin with the following configuration:

new OfflinePlugin({
    cacheName: 'cache-name',
    cacheMaps: [
        {
            match: function(requestUrl) {
                return new URL('/', location);
            },
            requestTypes: ['navigate']
        }
    ],
    externals: [
        'assets/images/logos/slider.png',
        'assets/images/banners/banner-1-320.jpg',
        'assets/images/banners/banner-1-480.jpg',
        'assets/images/banners/banner-1-768.jpg',
        'assets/images/banners/banner-1-1024.jpg',
        'assets/images/banners/banner-1-1280.jpg',
        'assets/images/banners/banner-1-1400.jpg'
    ],
    responseStrategy: 'network-first', // One of my failed attempts to fix this issue
    ServiceWorker: {
        output: 'my-service-worker.js'
    }
})

The problem is not related to the browser because I have reports from IE11, safari, chrome, etc.

Any tips on what I can do wrong or how can I fix this problem?

Answer 1

2. window.location.reload() errorLoading catch(), , , .

<Route path="about" 
  getComponent={(location, callback) => {
    System.import('./about')
    .then(module => { callback(null, module.default) })
    .catch(() => {
      window.location.reload()
    })
  }} 
/>

---

, , , , , , , , () (, ), .

, , (, , ?).

• devtools
• (, /home to/about)

, , (, ), . , , .

- , , chunk , 3.something.js 3.js. , , , , , .

: , , sw-precache-webpack-plugin.