Issues on Storybook 6.4 upgrading

I recently upgraded the Storybook from v6.1.11 to v6.4.19 in my company's project, but the process is not smooth. I met the two issues on my upgrading.

Issue1: Missing class properties transform #

Solution: add the below code to the ./storybook/main.js.

module.exports = {
  babel: async (options) => ({
    ...options,
    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
  }),
};

Issue2: iframe.html no longer built with --preview-url #

My storybook website runs in a subpath domain so should add --preview-url on the build command, but sadly find iframe.html no longer generated after upgrading.

The solved way is adding the option --force-build-preview to the build command.

References #

• CLI: Add option to force-build iframe despite custom preview URL
• Storybook 6.2.0-beta.13 not transforming class properties

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.

Discussion(login required)