Fail to load storybook everytime - reactjs

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

Answer 1

Try changing your node version to LTS.

Answer 2

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