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

shincurry · 2020-05-27T06:27:56Z

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:

run yarn upgrade-interactive
choose storybook related package and upgrade
run yarn storybook
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

The text was updated successfully, but these errors were encountered:

tooppaaa · 2020-05-27T07:08:09Z

Maybe related to #10783
Looking at it now

ahem · 2020-05-27T07:09:05Z

I am seeing the same error. I think the problem is what it says on the box: @babel/plugin-proposal-private-methods must be set to loose mode.

I can at least fix it with stupid stuff like this config:

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config) => {
    // do mutation to the config

      config.module.rules.filter(x => {
          return Array.isArray(x.use) && x.use[0].loader && x.use[0].loader.includes('babel-loader');
      }).forEach(babelLoaderSettings => {
        babelLoaderSettings.use[0].options.plugins.push([
            require.resolve('@babel/plugin-proposal-private-methods'),
            { loose: true }
        ]);
      });

    return config;
  },
};

With that it just runs.

memark · 2020-05-27T13:14:33Z

I get the same error in my CRA app (without much custom code in .storybook at all).

anark · 2020-05-27T16:35:27Z

I started getting this error after upgrading from 6.0.0-beta.13 to 6.0.0-beta15

shilman · 2020-05-27T16:35:39Z

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.16 containing PR #10941 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

anark · 2020-05-27T16:37:29Z

That fixed it for me! Thanks for the quick fix!

memark · 2020-05-27T19:17:39Z

Works great, thanks!

tannerbaum · 2020-06-19T10:46:37Z

@shilman I am experiencing the same thing following the guide here with version 6.0.0-beta.31. Only difference is I am adding it to an existing React project (but one previously without storybook at all).

This screenshot is from me trying it on beta.30 as well.

tooppaaa · 2020-06-19T11:12:00Z

@tannerbaum What version of docs has been installed ?

We're seing that the version is not the one from next which can explain your issue.

If version is different, could you upgrade to @next ?

tannerbaum · 2020-06-19T11:46:16Z

@tooppaaa So I will admit that I hadn't installed the docs separately as mentioned in step 3, that is my bad 😅 I thought it would in theory run without that add-on. So I did what the guide said and ran yarn add @storybook/addon-docs@next @storybook/addon-controls@next --dev. Resulted in what appears to be the same error.

info @storybook/react v6.0.0-beta.31
info 
info => Loading static files from: /Users/tanner/Documents/br24/br24-cms/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
60% building 423/434 modules 11 active /Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/addon-actions/node_modules/uuid/dist/esm-browser/v5.js✖ ｢wdm｣: Hash: 5e48c08ace1f71709d76
Version: webpack 4.43.0
Time: 12347ms
Built at: 06/19/2020 1:37:43 PM
                                      Asset      Size        Chunks                                Chunk Names
                                 index.html  2.41 KiB                [emitted]                     
        main.a156ff350f98f24231f8.bundle.js  75.6 KiB          main  [emitted] [immutable]         main
runtime~main.99691078705b39185f99.bundle.js  6.12 KiB  runtime~main  [emitted] [immutable]         runtime~main
vendors~main.cf48e29027cd471c91dd.bundle.js  1.97 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
Entrypoint main [big] = runtime~main.99691078705b39185f99.bundle.js vendors~main.cf48e29027cd471c91dd.bundle.js main.a156ff350f98f24231f8.bundle.js
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./.storybook/generated-refs.js 100 bytes {main} [built]
[./.storybook/generated-refs.js] 2.03 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/constants.js] 541 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/containers/ActionLogger/index.js] 8.63 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/register.js] 804 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/components/ControlsPanel.js] 4.29 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/constants.js] 247 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/register.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/title.js] 573 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/register.js] 1.99 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/shared.js] 337 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/constants.js] 450 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/register.js] 1.92 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 521 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
    + 412 hidden modules

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: /Users/tanner/Documents/br24/br24-cms/.storybook/generated-refs.js: 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).
    at enableFeature (/Users/tanner/Documents/br24/br24-cms/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:50:13)
    at PluginPass.pre (/Users/tanner/Documents/br24/br24-cms/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:51:35)
    at transformFile (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transformation/index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transformation/index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (/Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:254:32)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:216:11)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:184:28
    at /Users/tanner/Documents/br24/br24-cms/node_modules/@storybook/core/node_modules/babel-loader/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:108:33
    at step (/Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:280:14)
    at /Users/tanner/Documents/br24/br24-cms/node_modules/gensync/index.js:266:13
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./.storybook/generated-refs.js main[6]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.47 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.13 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

Could provide all the dependencies if helpful but the storybook ones are here:

    "@storybook/addon-actions": "^6.0.0-beta.31",
    "@storybook/addon-controls": "6.0.0-beta.31",
    "@storybook/addon-docs": "6.0.0-beta.31",
    "@storybook/addon-links": "^6.0.0-beta.31",
    "@storybook/preset-create-react-app": "^3.1.2",
    "@storybook/react": "^6.0.0-beta.31",

For what it is worth the current version of Storybook does work in this project using the init cli command.

bastiankistner · 2020-06-24T14:12:25Z

We fixed the error by simply turning '@babel/plugin-proposal-class-properties' into ['@babel/plugin-proposal-class-properties', { loose: true }] in our custom .babelrc.js as done in #10941

shilman · 2020-07-31T16:11:45Z

Does somebody with this problem have a public repro repo they can share?

PascalPixel · 2020-08-05T20:18:44Z

@shilman I can share one with just you 👍

KevinGhadyani-minted · 2020-08-05T21:34:24Z

I upgraded from beta.28 to rc.27 and now I have this error as well. Sadly, I haven't been able to fix it with the loose: true. It solved the Storybook errors, but Babel now breaks on code in my library with the same error message.

tooppaaa · 2020-08-06T17:04:47Z

@KevinGhadyani-minted any chance your repo is public to investigate a bit more ?

KevinGhadyani-minted · 2020-08-06T17:19:56Z

Sadly no :/.

The best I can do is show this error:

ERROR in ./src/styles/colors.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: D:\Projects\Companies\Minted\minted-components\src\styles\colors.js: 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).
    at enableFeature (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\helper-create-class-features-plugin\lib\features.js:50:13)
    at PluginPass.pre (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\helper-create-class-features-plugin\lib\index.js:53:35)
    at transformFile (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transformation\index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transformation\index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (D:\Projects\Companies\Minted\minted-components\node_modules\@babel\core\lib\transform.js:27:41)
    at transform.next (<anonymous>)
    at step (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:254:32)
    at gen.next (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:266:13)
    at async.call.value (D:\Projects\Companies\Minted\minted-components\node_modules\gensync\index.js:216:11)
 @ ./src/styleguide/mintedTheme.js 11:0-38 15:16-22 16:18-24 18:9-15 19:16-22 20:18-24 26:13-19 27:35-41 29:16-22 30:20-26 31:9-15 33:11-17 34:15-21 35:18-24
 @ ./src/styleguide/manager.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./src/styleguide/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./src/styleguide/generated-refs.js

Here's the .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true, // Need this for Storybook v6 beta.
        "modules": false
      }
    ],
    "@babel/preset-react",
    [
      "@emotion/babel-preset-css-prop",
      {
        "sourceMap": true,
        "autoLabel": true
      }
    ]
  ],
  "plugins": [
    "react-docgen",
    "react-hot-loader/babel",
    [
      "@babel/plugin-proposal-class-properties",
      {
        loose: true, // Need this for Storybook v6 beta.
      }
    ],
    "@babel/plugin-proposal-object-rest-spread",
  ]
}

davidcsally · 2020-08-18T03:35:34Z

For what it’s worth, I encountered this and fixed it by removing all Babel packages, installing, then adding them back and installing.

tooppaaa · 2020-08-19T18:12:46Z

@shincurry @KevinGhadyani-minted @PascalPixel is the last answer helping you ?

Is that still an issue for you on the latest 6.x ?

tangentlin · 2020-08-20T17:58:55Z

I have this issue when running build-storybook

KevinGhadyani-minted · 2020-08-24T21:47:00Z

@shincurry @KevinGhadyani-minted @PascalPixel is the last answer helping you ?

Is that still an issue for you on the latest 6.x ?

Which v6 version? Something released as of the last few weeks?

…js with storybookjs/storybook#10939

morinted · 2020-10-01T15:01:26Z

I couldn't work around this error without setting the plugins to "loose", which I ideally didn't want to do. For now, my workaround was to take my config file and modify it, just for storybook.

I have .babelrc.js and .storybook/.babelrc.js

.storybook/.babelrc.js is the following:

const projectConfig = require('../.babelrc.js')

/**
 * Take the project config, but set loose to true for class properties and private methods for Storybook.
 *
 * As Storybook updates, it's probably worth trying to delete this file and seeing if it will run without
 * the workaround.
 */
projectConfig.plugins = projectConfig.plugins.map((plugin) => {
  if (
    [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ].includes(plugin)
  ) {
    return [plugin, { loose: true }]
  }
  return plugin
})

module.exports = projectConfig

drewjs · 2020-10-23T18:46:09Z

Just fixed this in a project running storybook@6.0.26 by making sure babel and presets+plugins are up-to-date, delete node_modules and lockfile (in my case yarn.lock), and reinstall.

KevinGhadyani-minted · 2020-10-23T18:58:39Z

@drewjs Removing yarn.lock doesn't necessarily fix anything, but it could force-upgrade all your packages. This is because it has to reference package.json and downloads the latest versions of packages using the values contained in there.

Sometimes, your yarn.lock can become out of sync with package.json by running yarn upgrade or by merging GitHub dependabot security PRs.

In general, removing yarn.lock is not considered a best-practice as it could introduce runtime bugs without your knowledge.

drewjs · 2020-10-23T20:50:53Z

@KevinGhadyani-minted I agree not an ideal solution and it does come at a risk, but occasionally I've had lock files go out of sync and causes issues. Just sharing for others to try as a potential fix, but it’s good idea to draw attention to other issues it could create if not careful.

hydrosquall · 2020-12-25T17:54:42Z

@shilman I was able to reproduce this loose issue on a public Preact repository today, without adding any new stories beyond what Storybook auto-generates. I tried adding @storybook/preact 6.1.11, see this branch:

https://github.com/hydrosquall/recogito-client-core/tree/cameron.yick/add-date-picker

Run npx sb init
npm run storybook

Error message in the terminal: https://a.cl.ly/ApuGvOdG

I'm new to the project, so I'm hesitant to rearrange their .babelrc settings in addition to introducing a new library.

Hope this helps!

Update: I got storybook running by upgrading all babel/* deps (from 7.6.x to 7.12.1 in hydrosquall/recogito-client-core@dcd0671 ), and removing/reinstalling the package-lock.json.

kennethnym · 2021-01-02T16:02:17Z

Finally decided to upgrade to storybook (and other plugins) 6.1.11 but encountered this issue. Tried the following workarounds:

Upgrading babel deps
Expliciting specifying babel plugins
Adding { loose: true } option to babel-loader in webpack

So far none worked. Oddly enough I didn't have any issue on 6.0

KevinGhadyani-minted · 2021-01-04T17:15:40Z

It might be helpful for some. I stopped having issues with a Storybook v6 upgrade related to Babel. I had other completely unrelated issues, but that particular one was fixed.

tooppaaa self-assigned this May 27, 2020

tooppaaa added bug core configuration babel / webpack labels May 27, 2020

tooppaaa mentioned this issue May 27, 2020

Core: Add missing babel plugin #10941

Merged

shilman closed this as completed May 27, 2020

shilman reopened this Jul 31, 2020

shilman added the needs reproduction label Jul 31, 2020

fitfab added a commit to fitfab/fitfab-ui that referenced this issue Aug 27, 2020

update storybook and fix issues ERROR in ./.storybook/generated-refs.…

b725990

…js with storybookjs/storybook#10939

fitfab mentioned this issue Aug 27, 2020

Feature/storybook.6.0.19 fitfab/fitfab-ui#122

Merged

tooppaaa removed their assignment Sep 17, 2020

shilman added has workaround PN and removed has workaround labels Oct 2, 2020

kennethnym mentioned this issue Jan 2, 2021

Upgrade to v4.0 couds/react-bulma-components#265

Merged

ndelangen closed this as completed Jan 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

shincurry commented May 27, 2020

tooppaaa commented May 27, 2020

ahem commented May 27, 2020

memark commented May 27, 2020

anark commented May 27, 2020

shilman commented May 27, 2020

anark commented May 27, 2020

memark commented May 27, 2020

tannerbaum commented Jun 19, 2020 •

edited

Loading

tooppaaa commented Jun 19, 2020

tannerbaum commented Jun 19, 2020 •

edited

Loading

bastiankistner commented Jun 24, 2020 •

edited

Loading

shilman commented Jul 31, 2020

PascalPixel commented Aug 5, 2020

KevinGhadyani-minted commented Aug 5, 2020

tooppaaa commented Aug 6, 2020

KevinGhadyani-minted commented Aug 6, 2020

davidcsally commented Aug 18, 2020

tooppaaa commented Aug 19, 2020

tangentlin commented Aug 20, 2020

KevinGhadyani-minted commented Aug 24, 2020

morinted commented Oct 1, 2020

drewjs commented Oct 23, 2020 •

edited

Loading

KevinGhadyani-minted commented Oct 23, 2020

drewjs commented Oct 23, 2020

hydrosquall commented Dec 25, 2020 •

edited

Loading

kennethnym commented Jan 2, 2021 •

edited

Loading

KevinGhadyani-minted commented Jan 4, 2021 •

edited

Loading

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

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

Comments

shincurry commented May 27, 2020

tooppaaa commented May 27, 2020

ahem commented May 27, 2020

memark commented May 27, 2020

anark commented May 27, 2020

shilman commented May 27, 2020

anark commented May 27, 2020

memark commented May 27, 2020

tannerbaum commented Jun 19, 2020 • edited Loading

tooppaaa commented Jun 19, 2020

tannerbaum commented Jun 19, 2020 • edited Loading

bastiankistner commented Jun 24, 2020 • edited Loading

shilman commented Jul 31, 2020

PascalPixel commented Aug 5, 2020

KevinGhadyani-minted commented Aug 5, 2020

tooppaaa commented Aug 6, 2020

KevinGhadyani-minted commented Aug 6, 2020

davidcsally commented Aug 18, 2020

tooppaaa commented Aug 19, 2020

tangentlin commented Aug 20, 2020

KevinGhadyani-minted commented Aug 24, 2020

morinted commented Oct 1, 2020

drewjs commented Oct 23, 2020 • edited Loading

KevinGhadyani-minted commented Oct 23, 2020

drewjs commented Oct 23, 2020

hydrosquall commented Dec 25, 2020 • edited Loading

kennethnym commented Jan 2, 2021 • edited Loading

KevinGhadyani-minted commented Jan 4, 2021 • edited Loading

tannerbaum commented Jun 19, 2020 •

edited

Loading

tannerbaum commented Jun 19, 2020 •

edited

Loading

bastiankistner commented Jun 24, 2020 •

edited

Loading

drewjs commented Oct 23, 2020 •

edited

Loading

hydrosquall commented Dec 25, 2020 •

edited

Loading

kennethnym commented Jan 2, 2021 •

edited

Loading

KevinGhadyani-minted commented Jan 4, 2021 •

edited

Loading