storybook: error with cache when running storybook

Sometimes when running the storybook, breaks and only works after removing the cache

error

ERR! SyntaxError: app/node_modules/.cache/storybook/dev-server/325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7: Unexpected end of JSON input
ERR!     at JSON.parse (<anonymous>)
ERR!     at app/node_modules/file-system-cache/node_modules/jsonfile/index.js:36:18
ERR!     at app/node_modules/graceful-fs/graceful-fs.js:123:16
ERR!     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
ERR!  SyntaxError: app/node_modules/.cache/storybook/dev-server/325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7: Unexpected end of JSON input
ERR!     at JSON.parse (<anonymous>)
ERR!     at app/node_modules/file-system-cache/node_modules/jsonfile/index.js:36:18
ERR!     at app/node_modules/graceful-fs/graceful-fs.js:123:16
ERR!     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

    WARN Broken build, fix the error above.
    WARN You may need to refresh the browser.

command used to remove all cache

find . -name ".cache" -type d -prune -exec rm -rf '{}' +

System

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.10 - ~/Documents/projects/app/node_modules/.bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Firefox: 83.0
    Safari: 14.0.2
  npmPackages:
    @storybook/addon-actions: 6.1.14 => 6.1.14 
    @storybook/addon-console: 1.2.2 => 1.2.2 
    @storybook/addon-docs: 6.1.14 => 6.1.14 
    @storybook/addon-essentials: 6.1.14 => 6.1.14 
    @storybook/addon-knobs: 6.1.16 => 6.1.16 
    @storybook/addon-links: 6.1.14 => 6.1.14 
    @storybook/addon-storyshots: 6.1.14 => 6.1.14 
    @storybook/addon-storysource: 6.1.14 => 6.1.14 
    @storybook/react: 6.1.14 => 6.1.14 
    @storybook/storybook-deployer: 2.8.7 => 2.8.7 

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 20
  • Comments: 34 (6 by maintainers)

Most upvoted comments

I’m able to temporarily resolve this with:

rm -rf node_modules/.cache/storybook

…and then it works again… until it doesn’t.

I ran into the same issue (the Error: EBUSY: resource busy or locked, open '\storybook-test\node_modules.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7 one) today as well. Consistently reproduced for me and a team member preventing Storybook from running for us.

After digging into it a bit, it appears this line in progress-reporting.ts is causing the error: https://github.com/storybookjs/storybook/blob/bf98ade4ca2067ddd23dfbf4cd65e19b889fa9ea/lib/core-common/src/utils/progress-reporting.ts#L52

I suspect that this method is hammering the file system and either overloading it or Windows Defender is stepping in due to “suspicious” file system hammering or something 🤷‍♂️

I was able to work around this in a pretty hacky way, but it did enable me to run storybook. In my project’s .storybook/main.ts file, I added a function to customize the managerWebpack and set cache.set to a no-op:

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

Perhaps a better workaround would be an option to disable all caching in case future uses of the cache cause similar issues. A real fix might be to update progress-reporting to hammer the file system less (perhaps debouncing or throttling?) or rework progress-reporting to not rely on file system at all if possible.

Cheers! 😃

I am using Storybook v5 with (webpack v4) and nothing helped, not even deleting node_modules or clearing npm cache (just to be sure).

I’ve tried to delete the node_modules folder a few times and re-installing all modules but the error OP mentioned persisted, but with a TON more errors… (I really don’t like doing that because it degrades the SSD lifespan/performance due to the huge amount of files writes to sectors)

Only deleting the entire project, killing the terminal instance (and all IDEs) and then cloning the repo and re-installing worked.

Black magic 😃

@shilman this issue is still present in Storybook 7.0.24

@andrewiggins your solution worked for me too, I got “UNKNOWN” error every time. I spend hours trying to solve it. Thank you!! ❤

@Tiberriver256 Thanks for the tip. Meanwhile changing cache type to memory does the trick for me.

webpackFinal: async (config) => { config.cache = { type: 'memory' } return config }

#18520

Your solution fixed right away my problem. Thanks!

Still happening in Storybook 8 and the frequency renders the Storybook / Vite combination unusable.

I have been running storybook 7.0.20 and I get the same issue on a work laptop. When I have pulled down the reproduction repos from this thread: 18520 onto my personal machine I do not experience the problem. We are currently looking into whether anti virus / windows defender software is causing this to happen. Original I installed a version of 6.5 SB on the work laptop, I had the same issue but was able to use @andrewiggins solution which prevented the crashing. It would be great if there was a work around for SB 7 to prevent this continual crashing and then reload of the server which is taking minutes each time. I really do like SB, and would like to help find a solution, but it’s hard to test out why this is happening on the work laptop due to their strict security policies

I’m also getting the same error, except it happens every time, even after deleting the .cache folder. I haven’t been able to find a workaround.

I’ve tried starting from scratch with a brand new CRA and the latest Storybook (6.5.8) several times and using also trying different versions of storybook (6.5.0 and 6.0.0, and 7 prerelease with no luck).

Steps:

  • Created project with latest Create React App with Typescript
  • Installed Storybook
  • Run Storybook,
  • I get this error, every time:

I’m on Windows 10 Pro.

I also tried executing ‘npm run storybook’ with VSCode closed, but I got the same error.

info => Loading presets No issues found. 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:\Users\bkelley\repos\storybook-test\node_modules.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7’] { errno: -4082, code: ‘EBUSY’, syscall: ‘open’, path: ‘C:\Users\bkelley\repos\storybook-test\node_modules\.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7’ }

Any workaround suggestions would be really appreciated!

I modified my package.json to

“storybook”: “start-storybook -p 6006 --no-manager-cache”,

And can run storybook now. (had the cache error continually before)

Edit: No only worked for one run then same problem returned