Troubleshooting "ChunkLoadError" in DSM Storybook

If you run into an error “ChunkLoadError: Loading Chunk X Failed” on Storybook 6.2+, the below workaround may solve it.

Storybook 6.2+ has added new optimizations to its bundling process. Because of how DSM handles uploaded and hosted assets, the current Live Components architecture doesn't support the additional JavaScript chunks generated by the new Storybook bundles.

As a workaround, you can disable webpack chunking by adding the following code to your main.js Storybook configuration file.

// .storybook/main.js
const webpack = require('webpack');

/**
 * Disables Webpack from splitting the code into chunks
 * @param config - The webpack config to update
 */
function disableChunkSplitting(config){
  config.optimization = { splitChunks: { chunks: 'async' } };
  config.output = { ...config.output, chunkFilename: '[chunkhash].chunk.js', };
  config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1, }));

  return config;
}

module.exports = {
  stories: [...],
  addons: [...],
  managerWebpack: async (config) => {
	return disableChunkSplitting(config);
  },
  // There is another webpack configuration for the preview iframe
  //called `webpackFinal`. If you still get chunk loading errors from
  // within the preview iframe you need to add the chunk disabling
  // configuration to `webpackFinal` by uncommenting the following
  // three lines. 
  // webpackFinal: async (config) => {
  //  return disableChunkSplitting(config);
  // },
};