[Bug] builder-vite not working with vite 3

[szhang-brighte]

What version of vite are you using?

3.0.9

System info and storybook versions

System:
  OS: macOS 12.5.1
  CPU: 2 GHz Quad-Core Intel Core i5
Binaries:
  Node: 18.5.0 - ~/.nvm/versions/node/v18.5.0/bin/node
  Yarn: 3.2.0 - ~/.yarn/bin/yarn
  npm: 8.12.1 - ~/.nvm/versions/node/v18.5.0/bin/npm
Browsers:
  Firefox: 103.0.2
  Chrome: 104.0.5112.101
npmPackages:
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-storysource": "^6.5.10",
    "@storybook/builder-vite": "^0.2.2",
    "@storybook/node-logger": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",

Describe the Bug

I'm trying to update vite from 2 to 3. After updating vite and @storybook/builder-vite to the latest, I'm getting an error

ℹ ｢wdm｣: Compiled successfully.
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.10 for React started                │
│   16 s for manager and 16 s for preview             │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.107:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
16:57:34 [vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename '/Users/sz/Documents/workspace/vendor-microfrontends/packages/spark-web/node_modules/.vite-storybook/deps_temp' -> '/Users/sz/Documents/workspace/vendor-microfrontends/packages/spark-web/node_modules/.vite-storybook/deps'
    at renameSync (node:fs:993:3)
    at Object.commit (file:///Users/sz/Documents/workspace/vendor-microfrontends/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:37133:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async commitProcessing (file:///Users/sz/Documents/workspace/vendor-microfrontends/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:36608:17)
    at async runOptimizer (file:///Users/sz/Documents/workspace/vendor-microfrontends/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:36646:17)

I tried to delete node_modules/.cache and node_modules/.vite-storybook and re-run storybook. But this didn't work. I then tried to delete the whole node_modules folder and yarn.lock file and re-install everything and run storybook. But got the same error.

This is my storybook config file:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  features: {
    emotionAlias: false,
    storyStoreV7: true,
  },
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
};

After I downgraded to vite 2.9.14 and @storybook/builder-vite to 0.1.41, everything started working again. Nothing was changed to the actual code.

Link to Minimal Reproducible Example

No response

Participation

• [ ] I am willing to submit a pull request for this issue.

[IanVS]

This definitely looks related to vite changing the structure of their cache. When you deleted node_modules/.vite_storybook, are you certain you were in the right node_modules? It looks like the cache is being kept in packages/spark-web/node_modules/, did you delete that one as well?

[szhang-brighte]

We have a monorepo setup. It looks like this:

|-- monorepo
|   |-- node_modules
|   |-- packages
|   |   |-- app1
|   |   |   |-- node_modules
|   |   |-- app2
|   |   |   |-- node_modules
|   |   |-- spark-web
|   |   |   |-- node_modules

I've deleted all node_modules folders in the monorepo but still getting this error.

[IanVS]

Is this an open-source project that you can share a link to? If not, are you able to create a minimal reproduction that you can share? Without being able to dig in and poke around, I'm not sure what's going on. The one last thing you could try is a git clean to remove all untracked files, then re-install and try again, but if you already deleted all the node_modules, I'm not hopeful that it would fix anything. It does look like at least one other person had this problem: https://github.com/vitejs/vite/issues/9408

And here's someone who had the issue without storybook, it seems: https://github.com/vitejs/vite/issues/9522

[AndrewJSchoen]

I am experiencing the same issue. Updating to 0.2.2 from 0.1.39 causes the following error:

[vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename '/Users/me/Projects/my-project/node_modules/.vite-storybook/deps_temp' -> '/Users/me/Projects/my-project/node_modules/.vite-storybook/deps'
    at renameSync (fs.js:797:3)
    at Object.commit (file:///Users/me/Projects/my-project/node_modules/vite/dist/node/chunks/dep-665b0112.js:42219:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async commitProcessing (file:///Users/me/Projects/my-project/node_modules/vite/dist/node/chunks/dep-665b0112.js:41694:17)
    at async runOptimizer (file:///Users/me/Projects/my-project/node_modules/vite/dist/node/chunks/dep-665b0112.js:41732:17)

I even completely removed node_modules and re-installed using yarn, and the error persisted.

[Hecatron]

I recently ran into this problem, it seems to be intermittent which makes it difficult to figure out

This will sometimes work but other times generate an error

yarn create vite test1 --template vue-ts
cd test1
yarn install
# Add Storybook
npx storybook@future init
# Run Storybook
yarn storybook

19:01:29 [vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename 'C:\test2\node_modules\.vite-storybook\deps_temp' -> 'C:\test2\node_modules\.vite-storybook\deps'

This is on windows btw.
Edit: I wonder if this might be some form of timing issue in relation to the filesystem and windows perhaps where more than one thread is trying to access or altering something at the same time.

[Hecatron]

As a workaround deleting the node_modules directory then running yarn install I've found seems to work.
I'm not sure if adding a new package in might be a trigger.

[Hecatron]

One trigger for the problem seems to be when adding new packages to a project. I think this will trigger a redo over of the temp directory being generated or moved which then has a 50 / 50 chance of working or generating an error on the next run. Although once it is working it seems to stay that way.

Not sure if it's a Windows only problem, but deleting node_modules if it crops up then doing a yarn install seems to be the only workaround I've found so far.

[IanVS]

I opened an issue in vite, and there's a PR that may help to improve the situation, but I'm not sure it'll solve it completely.

[elliotgonzalez-lk]

What ultimately fixed this for me, was immediately closing the browser tab opened by yarn storybook before it can make any requests. I gave it a few seconds then opened a new tab and navigated to http://localhost:6006/. Everything worked. I have to do this every time I need to relaunch the server.

[katerberg]

Mostly adding this as a plus-one on this issue. It manifests for me as crashes in two ways.

1: Stories and everything in vite-dev failing to load. No errors or feedback other than this, which implies that something is causing the server to restart just from me navigating the Storybook UI.

2: Cannot GET /vite-dev/@vite/client appears with a 504 after navigating the UI for a little while. It requires a server restart to make it go away.

[IanVS]

immediately closing the browser tab …

Interesting! You can also prevent a browser from opening in the first place by passing the --no-open option to storybook when you launch it.