error with cache when running storybook

[daniloab]

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 

[Abdilar]

I have the same issue too.

[mrichmond]

I'm able to temporarily resolve this with:

rm -rf node_modules/.cache/storybook

...and then it works again... until it doesn't.

[blairzhao111]

I have had the same issue several times. Removing the storybook cache in node_modules solves the problem. Seems like cached json could be not valid somehow, not sure its storybook's problem or npm to blame. Maybe wrapping JSON.parse in try/catch block would prevent such runtime exceptions.

[shilman]

Does anybody have a repro in which this happens frequently enough to debug it?

[YoungElPaso]

Same, doesn't happen often tho in my experience. Confirm removing node_modules/.cache/storybook works

[adarshpastakia]

Does anybody have a repro in which this happens frequently enough to debug it?

https://github.com/adarshpastakia/snail-ui this project fails all the time on rebuild, i however have another project https://github.com/adarshpastakia/ant-extensions where it doesnt fail and both repos are using 6.1.20

what i did find is that in .cache/storybook/dev-server there is always a file present 325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7 which during rebuild goes blank

not sure if this helps but in the projects that work when started this file contains
{"value":11,"type":"Number"} whereas on the failed project {"value":1752,"type":"Number"} and only deleting just this file solves the build failure which would recreate it and then fail on rebuild again

[adarshpastakia]

found the culprit I think ;) either way it seems to be working now, downgrading react-scripts to 3.4.x it works fine with latest storybook version

[ghost]

I hit this problem several times on day one of trying to integrate this with an existing Next app. Hard deleting cache fixes it but the issue came right back several times with little more than basic edits to Storybook files.

[shilman]

@balibebas can you try the latest 6.2 RC? we recently made some changes that could be relevant

npx sb upgrade --prerelease

[yairEO]

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 :)

[vish01]

I'm getting the same issue as well. There's definitely cache manager involved. Removing cache folder inside node_modules/.storybook seems to be fixing the error until I run storybook the 2nd time.

[thebriankelley]

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!

[D-T-Design]

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!

Same error here setting up a fresh project. Been looking for alternatives as I haven't been able to find a solution yet

[erichstark]

My colleague have similar problem on Windows 10. On MacOS everything works fine.

[axelv]

Same problem here on MacOS M1.

[Tiberriver256]

Got this on a Windows machine at work and it looked like the cache file was getting locked by Windows Defender. Is there any way to disable that particular caching mechanism?

[pixels4kids]

@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

[cairnswm]

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

[andrewiggins]

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:

storybook/lib/core-common/src/utils/progress-reporting.ts

Line 52 in bf98ade

options.cache.set('modulesCount', totalModules);

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! :)

[daiant]

Your solution fixed right away my problem. Thanks!

[YehudaKremer]

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

[binochoi]

developers who use vue 3 and vite should to remove .vite-storybook too

sudo rm -rf ./node_modules/.cache/.vite-storybook

[JesusTheHun]

@shilman this issue is still present in Storybook 7.0.24

[duncan-s-white]

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

[JesusTheHun]

To respond to @duncan-s-white's hypothesis, I'm having the issue with MacOs Ventura 13.4.1.
If we make the -reasonable- assumption that there is a single cause to this issue, we can rule out Windows Defender and anti-viruses.

[sunrize531]

[email protected], Having this consistently on fedora, vue3 project. It complains about broken JSONs in cache, like so:

/the/project/node_modules/file-system-cache/lib/common/Util.js:74
            throw new Error(`Failed to read cache value at: ${path}. ${error.message}`);
                  ^

Error: Failed to read cache value at: /the/project/node_modules/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-f086b87885981c04ce7a583ff90a49313de83de7. /the/project/node_modules/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-f086b87885981c04ce7a583ff90a49313de83de7: Unexpected end of JSON input
    at Object.<anonymous> (/the/project/node_modules/file-system-cache/lib/common/Util.js:74:19)
    at Generator.throw (<anonymous>)
    at rejected (/the/project/node_modules/file-system-cache/lib/common/Util.js:6:65)

Removing cache directory doesn't help.
Also tried to rm -rf node_modules package-lock.json, followed by npm i, doesn't help.
There's nothing wrong with the file it's complaining about, it's a valid JSON file.
I think it might be trying to read it before it's actually populated.

[duncan-s-white]

This issue is a strange and very frustrating one, and has stopped us being able to use the software so far as it just isn't viable for use as a development tool when it is crashing locally so often, almost always 6-9 file saves / hot reloads.

I saw a comment on the other now closed thread from @thuraua that a clean install with Vite instead of webpack didn't have this issue and seemed quicker, both of which seemed to be true for me when I installed it.

However I did read that it is not ideal to have sb running using vite and your project that will consume the components running with webpack due to the potential difference in configuration e.g. I had noticed that environmental variables are dealt with differently.

The last things I tried to change but all with no luck in the main.ts file were switching all caching options to false:
(I also tried setting the cache setting type in the webpack final method as suggested by @pixels4kids to 'memory' also with no difference.)

I wondered should it even be reading from the node_modules.cache\storybook\dev-server\ dir when all these settings are set to false?

I think I am going to go down the route of using the Vite builder, as the only other viable alternative was to downgrade to 6.5 and use the work around for this that uses the managerWebpack method which no longer exists in sb7.

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[rnnyrk]

Trying to migrate from Vite to Webpack to use https://storybook.js.org/recipes/next, but constantly running into this locked or busy error. Solution nowhere to be found. All webpackFinal, caching: false options etc are not working. Any more tips?

[valentinpalkovic]

Can someone provide a reproduction with the latest version of Storybook 7?

[antoinepairet]

Can someone provide a reproduction with the latest version of Storybook 7?

@valentinpalkovic No reproduction yet, but I believe #23189 and #18520 have the same root cause.

[mcqj]

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

[Masvi]

that works for me! thnks @daniloab

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

[ddamato]

I had this problem specifically when trying to run my new project using Google IDX. The project worked as expected on my Mac locally. The reply by @duncan-s-white gave me some direction. I'm using [email protected].

// main.ts
const config: StorybookConfig = {
  core: {
    builder: {
      name: "@storybook/builder-vite",
      options: { fsCache: false } // this solved it for me
    },
  },
}