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 

[mrichmond]

I’m able to temporarily resolve this with:

rm -rf node_modules/.cache/storybook

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

[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: 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! 😃