Last updated: 06.03.2023

Context:

• Environment: SPA React Application with Webpack as a bundler
• Dependencies:
  • Webpack version: "webpack": "5.82.0"
  • Storybook version: "storybook": "7.5.3"

Problem:

Storybook creates a chunk that has ~ mark in the chunk-name - this could be considered as illegal character in URL (blacklisted at network level).

Root cause:

By default, Storybook generates its main chunk with Webpack using the pattern: '[name].[contenthash:8].iframe.bundle.js'. This results in chunk names such as runtime~main.35339373.iframe.bundle.js, where the tilde can be problematic.

Solution:

Simply remove [name] part from filename - since we don’t have control over it.

// .storybook/main.ts or main.js

const config: StorybookConfig = {
  webpackFinal: async (config) => {
	  config.output = {
		  ...config.output,
      filename: '[contenthash:8].iframe.bundle.js',
	  }
    return config;
  },
}

For an in-depth understanding of customizing Storybook's Webpack setup, visit Storybook's official documentation on Webpack configuration.