Fail to load storybook everytime

Question

Failed to load storybook, everytime,I run npm run storybook I have ever tried to clear the npm-cache as well, it didn't worked out.

I am using latest version of storybook - v6.5.4

Error: triggerUncaughtException(err, true /* fromPromise */); ^

[Error: EBUSY: resource busy or locked, open 'C:\Users\soham.nandi\Desktop\analytics-storybook\node_modules.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'] { errno: -4082, code: 'EBUSY', syscall: 'open', path: 'C:\Users\soham.nandi\Desktop\analytics-storybook\node_modules\.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'

main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
    "@storybook/addon-a11y",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  features: {
    storyStoreV7: true,
  },
};

main.js

import { Suspense } from "react";
import { initReactI18next } from "react-i18next";
import i18n from "i18next";
import HttpApi from "i18next-http-backend";
import { LANGUAGES, TIMEZONES } from "../src/constants";
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "../src/styles/index.scss";
i18n
  .use(initReactI18next)
  .use(HttpApi)
  .init({
    supportedLngs: LANGUAGES,
    fallbackLng: "en-US",
    lng: "en-US",
    backend: {
      loadPath: "/assets/locals/{{lng}}/translation.json",
    },
    react: { useSuspence: false },
  });

export const globalTypes = {
  locale: {
    name: "Change Language",
    description: "Change Language Support for the application",
    defaultValue: "en-US",
    toolbar: {
      icon: "lightning",
      items: LANGUAGES,
      showName: true,
    },
  },
  timezone: {
    name: "Change Timezone",
    description: "Change Timezone Support for the application",
    defaultValue: "Asia/Kolkata",
    toolbar: {
      icon: "time",
      items: TIMEZONES,
      showName: true,
    },
  },
};

export const decorators = [
  (Story, context) => {
    i18n.changeLanguage(context.globals.locale);

    return (
      <div style={{ margin: "3em" }}>
        <Suspense fallback={<div>Loading...</div>}>
          <Story />
        </Suspense>
      </div>
    );
  },
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    storySort: (a, b) =>
      a.title === b.title
        ? 0
        : a.id.localeCompare(b.id, undefined, { numeric: true }),
  },
};

package.js

{
  "name": "analytics-storybook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^5.1.3",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.3.4",
    "i18next": "^21.8.2",
    "i18next-http-backend": "^1.4.0",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-datepicker": "^4.7.0",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.16.9",
    "react-scripts": "^5.0.1",
    "react-select": "^5.3.2",
    "react-table": "^7.8.0",
    "react-table-sticky": "^1.1.3",
    "sass": "^1.51.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-a11y": "^6.5.4",
    "@storybook/addon-actions": "^6.5.4",
    "@storybook/addon-essentials": "^6.5.4",
    "@storybook/addon-interactions": "^6.5.4",
    "@storybook/addon-links": "^6.5.4",
    "@storybook/builder-webpack5": "^6.5.4",
    "@storybook/manager-webpack5": "^6.5.4",
    "@storybook/node-logger": "^6.5.4",
    "@storybook/preset-create-react-app": "^4.1.1",
    "@storybook/react": "^6.5.4",
    "@storybook/testing-library": "^0.0.11",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-storybook": "^0.5.12",
    "identity-obj-proxy": "^3.0.0",
    "prop-types": "^15.8.1",
    "webpack": "^5.72.1"
  }
}

npm version: v8.10.0

node version: v16.15.0

Maybe this could help https://stackoverflow.com/a/45757541/6943587. Also try removing `addons` one by one to see if any of those are creating issues. — Nickofthyme, May 26 '22 at 18:42
Driver name: HP Wolf Security You can use this source: https://support.aspnetzero.com/QA/Questions/11057/Error-EBUSY-resource-busy-or-locked-when-running-npm-run-create-bundles — Soham Nandi, Oct 10 '22 at 10:13

score 1 · Answer 1 · answered Sep 22 '22 at 19:43

1

Try changing your node version to LTS.

answered Sep 22 '22 at 19:43

Runguinator

11
1

Soham Nandi · Accepted Answer · 2022-10-10T10:12:51.793

1

I got the solution, it was due to some Hp driver. I uninstalled it, it started working

Driver name: HP Wolf Security

https://support.aspnetzero.com/QA/Questions/11057/Error-EBUSY-resource-busy-or-locked-when-running-npm-run-create-bundles

edited Oct 10 '22 at 10:12

answered Sep 28 '22 at 20:03

Soham Nandi

102
8

1

Please could you provide information on the specific drive? I may have the same issue. – Ferugi Oct 04 '22 at 16:53

score 0 · Answer 3 · answered Mar 28 '23 at 11:27

0

Add blow lines in main.js file.. it will start working

managerWebpack: (config, options) => {
      options.cache.set = () => Promise.resolve();
      return config;
  },

answered Mar 28 '23 at 11:27

Ashutosh Ranjan Jha

97
2
9

This no longer works. From the SB docs: As Storybook relies on esbuild to build its internal manager, support for bundling assets with the managerWebpack will no longer have an impact on the Storybook UI. We recommend removing existing managerWebpack configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand. (from https://storybook.js.org/docs/react/builders/webpack) – Jonathan Aug 01 '23 at 10:04

Fail to load storybook everytime

3 Answers3