ENOENT: no such file or directory, rename ... deps_temp
Problem
Describe the bug Sometimes when Vite is starting up with Storybook, it throws an error as shown below. Normally it's difficult to reproduce, but I've got a set of steps that seems to reliably reproduce the issue (at least, it happened to a storybook maintainer, and I was able to follow the steps as well. 1. checked out https://github.com/yannbf/storybook-coverage-recipes/tree/main/angular_vite 2. ran `npx storybook@future upgrade --prerelease --yes && yarn storybook` 3. Storybook opened fine but after compiling, then it broke completely because of a Typescript issue 4. I fixed the types by renaming Story to StoryFn (3 files: `button.stories.ts`, `page.stories.ts`, `header.stories.ts`) 5. I ran `yarn storybook` again 6. Got the issue Reproduction https://github.com/yannbf/storybook-coverage-recipes/tree/main/angular_vite System Info [code block] Used Package Manager yarn Logs <details> <summary>Click to expand!</summary> [code block] </details> Validations - [X] Follow our Code of Conduct - [X] Read the Contributing Guidelines. - [X] Read the docs. - [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead. - [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server. - [X] The provided reproduction is a mini
Error Output
error as shown below. Normally it's difficult to reproduce, but I've got a set of steps that seems to reliably reproduce the issue (at least, it happened to a storybook maintainer, and I was able to follow
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix ENOENT Error During Storybook Startup with Vite
The ENOENT error occurs due to a race condition or file system inconsistency when Vite attempts to rename temporary files during the build process. This can happen if the files are being accessed or modified concurrently, leading to the failure in locating the specified directory or file.
Awaiting Verification
Be the first to verify this fix
- 1
Ensure Clean Build Environment
Before running Storybook, ensure that there are no leftover temporary files from previous builds that could interfere with the current build process. This can be done by cleaning the build cache.
bashyarn cache clean && rm -rf node_modules/.vite - 2
Update Vite and Storybook Packages
Ensure that you are using the latest compatible versions of Vite and Storybook. This can help resolve any bugs that may have been fixed in newer releases.
bashyarn upgrade vite @storybook/vue - 3
Modify File Watcher Settings
Adjust the file watcher settings in Vite to reduce the likelihood of file access conflicts. This can be done by increasing the polling interval.
typescriptvite.config.js: export default defineConfig({ server: { watch: { usePolling: true, interval: 100, }, }, }); - 4
Run Storybook with Increased Memory Limit
Sometimes, memory limits can cause unexpected behavior. Increase the Node.js memory limit when starting Storybook to avoid potential issues.
bashNODE_OPTIONS='--max-old-space-size=4096' yarn storybook - 5
Check for Concurrent Processes
Ensure that there are no other processes running that may be accessing the same files or directories. This can be verified using system monitoring tools.
bashps aux | grep node
Validation
Confirm that the ENOENT error no longer appears when running 'yarn storybook'. Additionally, verify that Storybook compiles and runs without issues after making these changes.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep