storybook: Cannot run storybook after upgrading from 6.0.0-alpha30 to 6.0.0-beta.x

Describe the bug

I try to upgrade Storybook from 6.0.0-alpha30 to 6.0.0-beta.15. And I didn’t change any other files except package.json and yarn.lock. it throw some errors.

To Reproduce

Steps to reproduce the behavior:

1. run yarn upgrade-interactive
2. choose storybook related package and upgrade
3. run yarn storybook
4. see error messages

Code snippets

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(tsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    'storybook-addon-performance',
    '@storybook/addon-a11y',
  ],
  webpackFinal: (config) => {

    // ===================
    /**
     * modify storybook default config
     * remove svg default file-loader
     * use both @svgr/webpack and file-loader
     */
    const fileLoaderRule = config.module.rules.find(rule => {
      try {
        if (rule.test.test('.svg')) {
          return true
        }
      } catch (error) {
      }
      return false
    });
    fileLoaderRule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
    config.module.rules.push({
      test: /\.svg$/,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: {
              removeViewBox: false
            }
          },
        },
      }, {
        loader: 'file-loader',
        options: { name: 'icons/assets/[name].[hash:8].[ext]', esModule: false },
      }],
    })
    // ===================

    return config
  }
}

.storybook/manager.js

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';

const uuiPackage = require('../package.json')

const theme = create({
  base: 'light',

  brandTitle: `UUI (v${uuiPackage.version})`,
});

addons.setConfig({
  panelPosition: 'bottom',
  theme,
});

.storybook/preview.js

import { addParameters } from '@storybook/react';
import { addDecorator } from '@storybook/react';
import { withPerformance } from 'storybook-addon-performance';
import { withA11y } from '@storybook/addon-a11y';

import '../stories/style/tailwind.css';
import '../src/styles/index.scss';
import '../stories/style/storybook.scss';

addDecorator(withPerformance);
addDecorator(withA11y);

addParameters({
  options: {
    /**
     * Custom Story Sorting
     * if story parameters contains a property `sortIndex`, sort by it and place on top,
     * else the resting stories will sorted by story kind by alphabetically.
     */
    storySort: (a, b) => {
      const sortIndexA = a[1].parameters['sortIndex']
      const sortIndexB = b[1].parameters['sortIndex']
      if (sortIndexA && !sortIndexB) {
        return false
      } else if (!sortIndexA && sortIndexB) {
        return true
      } else if (sortIndexA && sortIndexB) {
        return sortIndexA > sortIndexB
      } else {
        return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
      }
    },
  },
});

.storybook/tsconfig.json

{
  "rootDirs": ["../src", "../stories"],
  "compilerOptions": {
    "baseUrl": "../src",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": [
    "../src/**/*.ts",
    "../src/**/*.tsx",
    "../stories/**/*.tsx",
    "./typing/*.d.ts"
  ],
  "exclude": [
    "../lib"
  ]
}

.storybook/webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          ignoreDiagnostics: [1005]
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          // Provide the path to your tsconfig.json so that your stories can
          // display types from outside each individual story.
          tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
        },
      },
    ],
  });
  config.module.rules.push({
    test: /\.css$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: path.resolve(__dirname, 'postcss.config.js'),
          }
        }
      }
    ],
  })
  config.module.rules.push({
    test: /\.s[ac]ss$/i,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          // Prefer `dart-sass`
          implementation: require('sass'),
          sassOptions: {
            fiber: require('fibers'),
          },
        }
      },
    ],
  })
  config.module.rules.push({
    test: /\.less$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
      },
      {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true,
        },
      },
    ],
  })
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

repo: https://github.com/HackPlan/UUI/tree/a4b8762a9837e926a5e0ca256a09dc6e5b04bab0

storybook config in .storybook directory

Additional context

ERROR in ./node_modules/@storybook/ui/node_modules/semver/classes/semver.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kyon/dev/uui/node_modules/@storybook/ui/node_modules/semver/classes/semver.js: 'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods
  4 |
  5 | const { compareIdentifiers } = require('../internal/identifiers')
> 6 | class SemVer {
    | ^
  7 |   constructor (version, options) {
  8 |     if (!options || typeof options !== 'object') {
  9 |       options = {
    at File.buildCodeFrameError (/Users/kyon/dev/uui/node_modules/@babel/core/lib/transformation/file/file.js:248:12)
    at NodePath.buildCodeFrameError (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/index.js:144:21)
    at verifyUsedFeatures (/Users/kyon/dev/uui/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:55:16)
    at PluginPass.Class (/Users/kyon/dev/uui/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:61:42)
    at newFn (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/kyon/dev/uui/node_modules/@babel/traverse/lib/context.js:140:19)
 @ ./node_modules/@storybook/ui/node_modules/semver/index.js 9:10-37
 @ ./node_modules/@storybook/ui/dist/settings/about.js
 @ ./node_modules/@storybook/ui/dist/settings/about_page.js
 @ ./node_modules/@storybook/ui/dist/settings/index.js
 @ ./node_modules/@storybook/ui/dist/app.js
 @ ./node_modules/@storybook/ui/dist/index.js
 @ ./node_modules/@storybook/core/dist/client/manager/index.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-storysource/register.js ./node_modules/@storybook/addon-knobs/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/storybook-addon-performance/register.js ./node_modules/@storybook/addon-a11y/register.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.46 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.11 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

94% after seal