Upgrading to v8.2.0 causes error "Module build failed: TypeError: _debug is not a function"

[simka1911]

Summary

When upgrading Storybook to version >= 8.2.0, I get this error:

ERROR in ./storybook-config-entry.js
Module build failed: TypeError: _debug is not a function
at Object. (/project-path/node_modules/@babel/traverse/src/path/index.ts:30:15)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Object.newLoader (/project-path/node_modules/esbuild-register/dist/node.js:2262:9)
at extensions..js (/project-path/node_modules/esbuild-register/dist/node.js:4833:24)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at Module.mod.require (/project-path/node_modules/next/src/server/require-hook.ts:70:26)
at require (node:internal/modules/helpers:176:18)

preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:7969)
at starter.next ()
at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:9922)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

After checking, the error disappears once '@storybook/addon-essentials' is removed from the addons array, so I am not sure if there is some issue coming from there.
Versions below 8.2.0 work normally.
I am using Storybook on a next.js project, with swc as a compiler.

Did anyone else experience similar issue?

Additional information

// main.ts
import type { StorybookConfig } from '@storybook/nextjs';

import path from 'path';
import { Options } from '@swc/core';

const config: StorybookConfig = {
  core: {
    builder: '@storybook/builder-webpack5',
  },

  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions', 'storybook-addon-rtl', 'storybook-dark-mode', '@storybook/addon-themes', '@storybook/addon-mdx-gfm'],

  framework: {
    name: '@storybook/nextjs',
    options: {}
  },

  swc: (config: Options, options: Options): Options => {
    return {
      ...config,
      jsc: {
          transform: {
            react: {
              runtime: 'automatic'
            }
          }
        }
    };
  },

  staticDirs: ['./public'],

  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@/*': path.resolve(__dirname, '../src')
      };
    }
    return config;
  },

  typescript: {
    reactDocgen: 'react-docgen-typescript'
  },

  docs: {}
};
export default config;

Create a reproduction

No response

[adriengibrat]

Hi,

I'm having exactly the same error.

The only distinction is that it happens on a monorepo:
no error when we run storybook at the root level, but got the exact same issue when we run storybook only on a specific package
(using npm --prefix=packages/xxx run storybook)

Did you find a workaround ?

[Marklb]

If still having this problem. Do you potentially have multiple versions of webpack? You could search the lock file. I don't know too much about how babel gets used, but could you have multiple versions of it?

After any upgrade of multiple packages or a major jump in a version, I always do a fresh install of dependencies, to cleanup the lock file, and rule that out as a problem. Could you delete node_modules/ and package-lock.json(or equivalent) then run install to see if it still happens. Sometimes the lock file will get confused and try to preserve old dependencies, when multiple packages depend on different versions of the same package, but a fresh install often clears that up. Your error isn't one I specifically recognize, but this is probably where I would start.

[simka1911]

Hi,
I tried cleaning up multiple times and that didn't help. What actually fixed the issue for me in the end was removing

"baseUrl": "./"

from the tsconfig.json file.
To be honest, I am not sure how that is related to the issue and to '@storybook/addon-essentials' package, maybe some of you have an idea?