Webpack 5 - EBUSY: resource busy or locked

DanDan117 commented 3 years ago

Hi there @shilman !

Working on a project that uses Angular 12 and Webpack 5, it seems that i am the only user in the team that is getting this issue and we are afraid it might backfire for everyone else in one point. The encountered error is as follows, after running storybook:

- Unhandled rejection Error: EBUSY: resource busy or locked, open 'C:\Users\fvasile\Documents\Storybook-template\taskbox\node_modules\.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'

To reproduce this issue, i have cloned a completely new instance of Storybook and have updated it with a couple of packages/libraries, and was able to reproduce the same issue. It seems that these following ones, or a combination of them, is causing the error:

"devDependencies": "@storybook/addon-actions": "^6.4.0-beta.14", "@storybook/addon-essentials": "^6.4.0-beta.14", "@storybook/addon-links": "^6.4.0-beta.14", "@storybook/angular": "^6.4.0-beta.14", "@storybook/builder-webpack5": "^6.4.0-beta.14", "@storybook/manager-webpack5": "^6.4.0-beta.14", "webpack": "^5.38.1",

Currently using these following versions and a more complete outline of the packages:

node v14.18.1
yarn 1.22.11
npm 6.14.15
"dependencies": { "@angular/animations": "12.1.4", "@angular/common": "12.1.4", "@angular/compiler": "12.1.4", "@angular/core": "12.1.4", "@angular/elements": "12.1.4", "@angular/forms": "12.1.4", "@angular/platform-browser": "12.1.4", "@angular/platform-browser-dynamic": "12.1.4", "@angular/router": "12.1.4", "@azure/msal-angular": "2.0.2", "@azure/msal-browser": "2.16.0", "@microsoft/signalr": "5.0.8", "@ngneat/until-destroy": "^8.0.3", "bootstrap": "5.0.2", "rxjs": "~6.6.7", "tslib": "^2.1.0", "webpack": "^5.38.1", "zone.js": "~0.11.4" },
"devDependencies": { "@angular-devkit/architect": "~0.1201.2", "@angular-devkit/build-angular": "12.1.4", "@angular-devkit/core": "12.1.4", "@angular/cli": "12.1.4", "@angular/compiler-cli": "12.1.4", "@babel/core": "^7.12.10", "@compodoc/compodoc": "^1.1.11", "@storybook/addon-actions": "^6.4.0-beta.14", "@storybook/addon-essentials": "^6.4.0-beta.14", "@storybook/addon-links": "^6.4.0-beta.14", "@storybook/addon-measure": "6.4.0-beta.14", "@storybook/angular": "^6.4.0-beta.14", "@storybook/builder-webpack5": "^6.4.0-beta.14", "@storybook/manager-webpack5": "^6.4.0-beta.14", "@types/jasmine": "^3.6.3", "@types/jest": "^27.0.2", "@types/node": "^16.4.6", "babel-loader": "^8.2.2", "concurrently": "^6.2.0", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~7.0.0", "karma": "~6.3.3", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "ng-packagr": "^12.1.0", "prettier-plugin-organize-imports": "^2.3.3", "protractor": "~7.0.0", "scss-bundle": "^3.1.2", "ts-node": "~10.1.0", "typescript": "~4.3.5" }, "engines": { "node": ">=14.15.4", "yarn": ">=1.22.10" }

main.js file looks like this:

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: [
    "../projects/**/*.stories.mdx",
    "../projects/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

Developing on Windows 10.

All in all, it seems that we have narrowed it down to a potential issue between Webpack 5 and Angular 12. Any help would be appreciated, let me know if you need more info. Thank you!

mgameover commented 2 years ago

Hi everyone, Faced with the same issue after migrating Angular v13 project from Storybook v6.4 to v6.5.0

Here is the error message:

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

I believe the issue is caused by version mismatch in angular13 webpack dependencies and @storybook/builder-webpack5 dependencies.

Any thoughts?

pedrus16 commented 2 years ago

Hey,

I have the exact same issue with a React v18 + Storybook v6.5.5. I created a minimal repo with yarn create react-app my-app and then running npx storybook init inside, I get the following error when running yarn storybook:

10% building 0/1 entries 0/0 dependencies 0/0 modulesnode:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: EBUSY: resource busy or locked, open 'C:\my-app\node_modules\.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'] {      
  errno: -4082,
  code: 'EBUSY',
  syscall: 'open',
  path: 'C:\\my-app\\node_modules\\.cache\\storybook\\dev-server\\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'
}

So my guess is that it is an issue with Webpack 5. I will try with different versions of Webpack and/or Storybook and see if I can find a workaround.

mgameover commented 2 years ago

Hi guys, any news? I tried Angular v14 (which was released few days ago) and Storybook v6.5.7 - same issue.

maartentenham commented 2 years ago

I have the exact same issue on windows10, Angular13 and Storybook 6.5.8.

kismann commented 2 years ago

I had the same error, following helped me:

in the package.json I added

"resolutions": { "webpack": „^5.0.0“ }

Pewtro commented 2 years ago

This also happens when not using Angular. Getting it on a react 17.0.2, storybook 6.5.9 project that did not have this issue prior to upgrading to 6.5.

So I can compile and it will work, until I make code changes and then when attempting to rebuild it will crash out with the resource busy or locked error.

jelche commented 2 years ago

I also am seeing this with web components as the framework. I've also seen it with both default webpack 4 and with opted in webpack 5. I am also seeing with 6.5.9 exactly as @pewtro stated with the addition of when it gets in the funky EBUSY state, I have to kill all node process for it to compile.

Tiberriver256 commented 2 years ago

Possibly related to #13795 (same error mentioned in comments, same cache folder)

patrickuhlmann commented 1 year ago

Confirming the problem with a fresh Angular 15 project (ng new angular-storybook) and using npx storybook init, adding resolutions as suggested by @kismann does not help in my case.

On the other hand the workaround proposed by @andrewiggins in https://github.com/storybookjs/storybook/issues/13795, adding

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

in the .storybook/main.js file worked.

valentinpalkovic commented 1 year ago

@patrickuhlmann Could you retry it with the freshly released Storybook 7? We did a bunch of improvements to the Angular integration in Storybook. I am curious, whether the issue is still existent in Storybook 7.

marlena-sliwinska commented 1 year ago

Hi, still have the same error with Storybook 7.0.10 and React 18. Any ideas on how to fix? The solution with managerWebpack(config) stopped work.

ferugi commented 1 year ago

Hi, still have the same error with Storybook 7.0.10 and React 18. Any ideas on how to fix? The solution with managerWebpack(config) stopped work.

I'm also having the exact same issue with Storybook 7.0.5 and React 18.2.0. Storybook previously worked with the previously mentioned workaround.

patrickuhlmann commented 1 year ago

I tested it again today with the latest versions (Angular 16 and Storybook 7). Everything worked fine now out-of-the-box.

valentinpalkovic commented 1 year ago

Can someone provide a reproduction repro with Storybook 7? Without having a reproduction it is pretty hard to work on a fix for this bug.

pedrus16 commented 1 year ago

Hey, I made a minimal repo with nextjs and storybook 7: https://github.com/pedrus16/sb-ebusy-repro

The issue only occurs on windows (Windows 10 in my case). It runs fine on WSL.

valentinpalkovic commented 1 year ago

@pedrus16 I have just checked out your repository, and I cannot reproduce it in a Window 11 environment. :/ I don't have a Windows 10 machine in place to test it.

pedrus16 commented 1 year ago

So I just tried on my home computer which is running W10 and I can't reproduce the issue. My guess is that it's an anti-virus/firewall or something on my computer at work that is causing the issue.

rene-vandenberg commented 1 year ago

I just ran into this bug when upgrading Storybook to 7.4.3 I run Storybook with web-components on Windows 10 Business. Fixed it with a hack as suggested by @andrewiggins in https://github.com/storybookjs/storybook/issues/13795

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

heatherdg commented 1 year ago

I'm having this same issue. Just updated to the latest storybook and it persists (7.5.2). I'm using Nextjs. Here's my main.ts. TIA

C:\ADF\CTDApp\ctdapp\node_modules\@storybook\cli\bin\index.js:23 throw error; ^

[Error: EBUSY: resource busy or locked, open 'C:\ADF\CTDApp\ctdapp\node_modules.cache\storybook\dev-server\a5a8bf6e622aef57065c6498611f40c911543d7d-a21314dc303c errno: -4082, code: 'EBUSY', syscall: 'open', path: 'C:\ADF\CTDApp\ctdapp\node_modules\.cache\storybook\dev-server\a5a8bf6e622aef57065c6498611f40c911543d7d-a21314dc303cf26dabba6bf4a8fd381e47e44e94'}`

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const config: StorybookConfig = {
    stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"],

    addons: [
        "@storybook/addon-links",
        "@storybook/addon-a11y",
        "@storybook/addon-essentials",
        {
            name: "@storybook/addon-styling",
            options: {}
        }
    ],
    framework: {
        name: "@storybook/nextjs",
        options: {}
    },

    staticDirs: ['../public'],
    docs: {
        autodocs: true
    },
    webpackFinal: async (config) => {

        if (config.resolve) {
          config.resolve.plugins = [
            ...(config.resolve.plugins || []),
            new TsconfigPathsPlugin({
              extensions: config.resolve.extensions,
            }),
          ];
        }
        return config;
      }
};
export default config;

storybookjs / storybook

Webpack 5 - EBUSY: resource busy or locked #16403