We use webpack 1.x with React to bundle our application. Furthermore, in order to bust caches when javascript files have changed we have our output set in webpack.config.js as:
output: {
path: __dirname + '/dist',
filename: 'index_bundle.[chunkhash:10].js',
publicPath: '/'
},
This successfully accomplishes our goal of changing file names when new versions of the app are deployed. And on a successful deploy, one can see that the new files are there.
The wrinkle comes in when a user is on the app during a deploy. Suddenly, chunks that were once there are not, and while the index.html successfully updates, some chunks that are currently in use by the browser make bad requests for old, non-existent files.
Is there a conventional way for webpack to handle the switch? Or within our React app to have it gracefully handle a bad component import. We host on S3, which (like Meteor, I'm under the impression) falls back to index.html on a non-existent file request. In our app, this results in a Syntax error: Unexpected token < error because it is expecting javascript, not HTML.
Edit: For averting the bad import in my React app, perhaps I could apply logic in the route's index.js file? Currently my getComponent calls look simply like this:
getComponent(nextState, callback) {
require.ensure([], (require) => {
callback(null, require('./components/HomePage').default);
});
}
HTTP 404which forces the browser to ignore the file and skip parsing. – Subito