[Bug]: SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.

[NTC-THSTO]

Describe the bug

running yarn storybook --debug-webpack does not build once I have imported ts files.

WARN storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
WARN - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated
info => Starting manager..
info => Starting preview..
WARN Expected '@storybook/addon-actions' (or '@storybook/addon-essentials') to be listed before '@storybook/addon-interactions' in main Storybook config.
info Using Babel compiler
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => [@storybook/addon-styling-webpack] Applying custom Storybook webpack configuration styling.
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
ERROR in ./node_modules/@amplio/core/core/components/Alert/index.tsx 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { Alert } from 'core/components/Alert/Alert';
| export { AlertType } from 'core/components/Alert/types';
> export type {
|   AlertContentProps,
|   AlertMessageProps,
 @ ./src/stories/Core/Components/Alert.stories.tsx 1:0-70 3:13-18 10:10-24
 @ ./src/ sync ^\.(?:(?:^%7C[\\/]%7C(?:(?:(?%21(?:^%7C[\\/])\.).)*?)[\\/])(?%21\.)(?=.)[^\\/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ ./stories/Core/Components/Alert.stories.tsx
 @ ./generated-stories-entry.cjs 3:123-259

To Reproduce

main.js

import type { StorybookConfig } from "@storybook/react-webpack5";

import { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("storybook-css-modules-preset"),
    getAbsolutePath("@storybook/addon-themes"),
    getAbsolutePath("@storybook/addon-viewport"),
    getAbsolutePath("@storybook/addon-controls"),
    getAbsolutePath("@storybook/addon-outline"),

    getAbsolutePath("@storybook/addon-styling-webpack"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  features: {
    storyStoreV7: false,
  },
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: true,
        lazyCompilation: true,
      },
    },
  },
};
export default config;

story

import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { Alert, AlertType } from '@amplio/core/core/components/Alert';

const meta: Meta<typeof Alert> = {
    component: Alert,
    title: 'Alert',
};

export default meta;
type Story = StoryObj<typeof Alert>;

export const FirstStory: Story = {
    args: {
        //👇 The args you need here will depend on your component
        type: AlertType.INFO, // Adjust as needed
    },
};

package.json

{
  "name": "@amplio/storybook",
  "version": "2024.3.1-1045-DEV",
  "author": "xyz",
  "license": "yzx",
  "repository": {
    "type": "git",
    "url": "xyz"
  },
  "resolutions": {
    "coa": "2.0.2",
    "@types/react": "^18.0.21",
    "@types/history": "4.7.11"
  },
  "peerDependencies": {
    "react-redux": "7.2.6"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@reduxjs/toolkit": "1.9.5",
    "@storybook/addon-essentials": "7.6.17",
    "@storybook/addon-interactions": "7.6.17",
    "@storybook/addon-links": "7.6.17",
    "@storybook/addon-onboarding": "1.0.11",
    "@storybook/blocks": "7.6.17",
    "@storybook/react": "7.6.17",
    "@storybook/react-webpack5": "7.6.17",
    "@storybook/testing-library": "0.2.2",
    "@tinymce/tinymce-react": "3.10.4",
    "@types/date-fns": "2.6.0",
    "@types/history": "4.7.11",
    "@types/node": "16.6.1",
    "@types/react": "18.0.21",
    "@types/react-outside-click-handler": "^1.3.3",
    "@types/react-redux": "7.1.7",
    "@types/react-router-dom": "5.3.3",
    "@types/react-select": "5.0.1",
    "@types/styled-components": "5.1.9",
    "@types/yup": "0.29.13",
    "@typescript-eslint/eslint-plugin": "6.3.0",
    "@typescript-eslint/parser": "6.3.0",
    "babel-plugin-styled-components": "2.1.4",
    "case-sensitive-paths-webpack-plugin": "2.4.0",
    "eslint": "8.12.0",
    "eslint-config-airbnb-typescript": "17.1.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-import-resolver-typescript": "3.5.5",
    "eslint-import-resolver-webpack": "0.13.4",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.4.0",
    "eslint-plugin-storybook": "^0.7.0",
    "focus-visible": "5.2.0",
    "formik": "2.2.9",
    "history": "4.10.1",
    "object-to-formdata": "4.4.1",
    "prettier": "2.0.1",
    "qs": "6.10.1",
    "react-bootstrap": "1.6.3",
    "react-bootstrap-table-next": "4.0.3",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-bootstrap-table2-toolkit": "2.1.3",
    "react-bootstrap-typeahead": "5.1.4",
    "react-cookie": "4.0.3",
    "react-datepicker": "3.1.3",
    "react-dom": "^18.2.0",
    "react-dropzone": "11.3.0",
    "react-idle-timer": "4.6.3",
    "react-number-format": "4.7.3",
    "react-outside-click-handler": "1.3.0",
    "react-redux": "7.2.6",
    "react-router-bootstrap": "0.25.0",
    "react-router-dom": "5.3.4",
    "react-scroll": "1.8.1",
    "react-select": "5.1.0",
    "styled-components": "4.3.2",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.10.0",
    "tinymce": "5.7.0",
    "typesafe-actions": "5.1.0",
    "typescript": "5.1.6",
    "typescript-plugin-styled-components": "3.0.0",
    "use-debounce": "7.0.0",
    "uuid": "8.3.0",
    "yup": "0.31.1"
  },
  "private": true,
  "dependencies": {
    "@amplio/core": "2024.3.1-1045-DEV",
    "@storybook/addon-actions": "^7.6.17",
    "@storybook/addon-styling-webpack": "^0.0.6",
    "@storybook/addon-themes": "^7.6.17",
    "@storybook/test": "^7.6.17",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.87",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "case-sensitive-paths-webpack-plugin": "2.4.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.6.17",
    "storybook-css-modules-preset": "^1.1.1",
    "ts-loader": "^9.5.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npx webpack --config .storybook/webpack.config.ts",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

System

No response

Additional context

This error only occurs once trying to import files.

I have tried using a webconfig but this also had the same issues.

We have no issue using this import method in any other implementations of our components, leading me to believe its a storybook issue

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
};

[vanessayuenn]

Hi, thanks for reporting this. The code snippets you provided don't seem to match the error message you shared, so it's difficult to understand what's wrong. Can you please create a repro via storybook.new? We prioritize bug reports that have reproduction. Thank you! 🙏

[fizz3r]

Also getting similar issue:

 @ ./storybook-stories.js 23:11-27:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./.storybook/preview.jsx 86:6
Module parse failed: Unexpected token (86:6)
File was processed with these loaders:
 * ../../../node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js

SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.

You may need an additional loader to handle the result of these loaders.
`

[nyeoni]

I also raised the next package version to 15 and migrated the reaction to 18 and got the same error. And Can't resolve '@swc/helpers/_/_tagged_template_literal' in with this error

ERROR in ./src/styles/GlobalStyle.tsx 3:0-88
Module not found: Error: Can't resolve '@swc/helpers/_/_tagged_template_literal' in '/Users/jupi/Project/healingpaper/web-frontend/webViews/personalization/src/styles'
 @ ./.storybook/preview.tsx 6:0-52 71:22-33
 @ ./storybook-config-entry.js 11:1965-2069 32:2-35:4 32:1953-35:3

preview compiled with 13 errors
=> 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 (/Users/jupi/Project/healingpaper/web-frontend/node_modules/@storybook/builder-webpack5/dist/index.js:1:8088)
    at starter.next (<anonymous>)
    at Module.start (/Users/jupi/Project/healingpaper/web-frontend/node_modules/@storybook/builder-webpack5/dist/index.js:1:10083)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[nyeoni]

I made a version of storybook 7 and solved it

[mbohovic]

I have the same problem, is there a solution to fix it?

[valentinpalkovic]

Hi @NTC-THSTO

Thank you for reporting this issue.

The problem is that you import a file from node_modules, which isn't compiled into normal JavaScript. Instead, it is still written in TypeScript. Storybook's webpack loaders usually don't transform files in node_modules for performance reasons.

I see, that you tried to set up a ts-loader yourself, but actually you have excluded node_modules. That's the reason why the ts-loader doesn't have any effect.

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/, // <- This prevents the transformation of e.g. ./node_modules/@amplio/core/core/components/Alert/index.tsx
            },
        ],
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
};

You could try to tweak your webpack config or tweak Storybooks webpack config by providing a webpackFinal configuration.

// .storybook/main.js|ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  webpackFinal: async (config, { configType }) => {
+    config.module?.rules?.push({
+      test: /\.tsx?$/,
+      use: 'ts-loader',
+      exclude: /node_modules(?!\/@amplio)/,
+    })
};

export default config;

By using the /node_modules(?!\/@amplio)/ exclude pattern, only files in the @amplio node_modules folder get transformed, ignoring all the other node_modules for performance reasons. I would also advice you to use babel-loader instead of ts-loader, because that's what Storybook does internally to transform your files.

[shn2016]

I encountered same issue. It is worth noting that babel has been moved out as part of major v8 upgrade, and you will need to set up by yourself.

For me, install @storybook/addon-webpack5-compiler-babel and @babel/preset-env, @babel/preset-react, setup .babelrc.js file, then the issue gone.

[eric-blue]

I encountered same issue. It is worth noting that babel has been moved out as part of major v8 upgrade, and you will need to set up by yourself.

For me, install @storybook/addon-webpack5-compiler-babel and @babel/preset-env, @babel/preset-react, setup .babelrc.js file, then the issue gone.

I just get this when I try that

ERROR in ./config/storybook/preview.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL]: _lruCache is not a constructor (While processing: /.../node_modules/@babel/preset-env/lib/index.js)

[Jacksonmills]

Same issues here, specifically when I am trying to set up React Server Components

[mbohovic]

this helped me

babel setting "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] },

npm i -D @storybook/addon-webpack5-compiler-swc

or with automatically setting the file main.ts storybook info npx storybook@latest add @storybook/addon-webpack5-compiler-swc

file .storybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
  addons: [
    ...
    "@storybook/addon-webpack5-compiler-swc"
  ],
  framework: {
    name: "@storybook/react-webpack5",
    ...
    options: {
      builder: {
        useSWC: true,
      },
    },
    ...,
  },
};
export default config;

[valentinpalkovic]

The useSWC flag isn't necessary in Storybook 8 anymore.

[edbasti]

babel/preset-env

@eric-blue what did you mean by setting up .babelrc?

[edbasti]

I encounter this error when I try to install storybook to an existing React Project that uses Rollup, any ideas guys?

[FlavioScimeca]

I encounter this error when I try to install storybook to an existing React Project that uses Rollup, any ideas guys?

same, did you fix that ?

[dario-baumberger]

@vanessayuenn

Another option for reproducing this:

1. Download or fork the storybook repo
2. yarn install
3. yarn task --task sandbox --start-from auto --template angular-cli/default-ts
4. cd sandoox/angular-cli-default-ts
5. yarn storybook

SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starterGeneratorFn (./node_modules/@storybook/builder-webpack5/dist/index.js:316:11)
    at starterGeneratorFn.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:396:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[paulgrotzke]

If someone trying to setup Gatsby 5 with Storybook 8 and wants to use @storybook/addon-webpack5-compiler-babel

I just created a fresh Gatsby App and installed SB with npx storybook@latest init

Had to reaplace @storybook/addon-webpack5-compiler-swc with @storybook/addon-webpack5-compiler-babel

My Webpack Config in main.ts looks like this

  webpackFinal: async (config: any) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { typescript: true }]],
      },
    })
    return config
  },

Packages:

  "dependencies": {
    "gatsby": "^5.13.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@chromatic-com/storybook": "^1.5.0",
    "@storybook/addon-essentials": "^8.1.6",
    "@storybook/addon-interactions": "^8.1.6",
    "@storybook/addon-links": "^8.1.6",
    "@storybook/addon-onboarding": "^8.1.6",
    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
    "@storybook/react": "^8.1.6",
    "@storybook/react-webpack5": "^8.1.6",
    "@types/node": "^20.11.19",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "babel-preset-react-app": "^10.0.1",
    "storybook": "^8.1.6",
    "typescript": "^5.3.3"
  }

[benkeen]

I get the same error. I'm trying to upgrade from v7 to v8. Our Storybook main and preview files are in TS format, and I get the error when it tries to process the preview.ts file. Almost seems like it's no longer recognizing my babel config which includes @babel/preset-react, @babel/preset-typescript and others.

Also, I'm in a monorepo if that makes any difference.

---

EDIT: I confirmed it's not recognizing my babel config file any more. As per this note in the doc, running:

BABEL_SHOW_CONFIG_FOR=path/to/my/preview.ts storybook dev ...

I see:

{
  "babelrc": false,
  "configFile": false,
  "filename": "/full/path/to/my/preview.ts"
}

Which is incorrect, I have a babel.config.js file defined in my package root. So in my case perhaps this is all due to the babel issue.

[paulgrotzke]

If someone trying to setup Gatsby 5 with Storybook 8 and wants to use @storybook/addon-webpack5-compiler-babel

I just created a fresh Gatsby App and installed SB with npx storybook@latest init

Had to reaplace @storybook/addon-webpack5-compiler-swc with @storybook/addon-webpack5-compiler-babel

My Webpack Config in main.ts looks like this

  webpackFinal: async (config: any) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { typescript: true }]],
      },
    })
    return config
  },

Packages:

  "dependencies": {
    "gatsby": "^5.13.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@chromatic-com/storybook": "^1.5.0",
    "@storybook/addon-essentials": "^8.1.6",
    "@storybook/addon-interactions": "^8.1.6",
    "@storybook/addon-links": "^8.1.6",
    "@storybook/addon-onboarding": "^8.1.6",
    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
    "@storybook/react": "^8.1.6",
    "@storybook/react-webpack5": "^8.1.6",
    "@types/node": "^20.11.19",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "babel-preset-react-app": "^10.0.1",
    "storybook": "^8.1.6",
    "typescript": "^5.3.3"
  }

I have already found, that is only working until you use Gatsby Link. currently debugging.

my guess is also that it has something to do with webpack and babel config. in SB8 they implemented @storybook/addon-webpack5-compiler-babel, maybe there are some problems.

[paulgrotzke]

I have found a working version with Storybook 8 and Gatsby 5.

I have created a starter with the needed config/settings: https://github.com/paulgrotzke/gatsby5-storybook8

[rdebeasi]

For what it's worth, SB_BUILDER-WEBPACK5_0003 seems to be a catchall for any Webpack error that occurs while building storybook. I found it helpful to get more specific errors by...

• Running Storybook build with the --debug flag, as shown in the original report
• Running Storybook doctor to check for problems.

In my case, the webpack error was:

Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
Error: [BABEL] ./node_modules/@angular/compiler/fesm2022/compiler.mjs: Cannot find module '@babel/helper-replace-supers'

The Storybook doctor error was:

Attention: The following dependencies are duplicated which might cause unexpected behavior:
@storybook/types: 7.6.20, 7.6.17
@storybook/channels: 7.6.20, 7.6.17
@storybook/core-events: 7.6.20, 7.6.17

I had an old plugin that was pulling in an extra copy of Storybook. I used yarn resolutions to deduplicate the dependency, which resolved the Webpack error.