[Bug]: Fails to start using Vite v4.3 (esbuild error)

[GRA0007]

Describe the bug

With the latest Vite update (v4.3.1), Storybook (using v7.0.7) fails to build with the following error at the top of the logs:

[ERROR] Could not read from file: /path/to/node_modules/.cache/vite-plugin-externals/@storybook/core-events.js

Then after this there are lots of the following for many packages:

✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/vite/node_modules/esbuild/lib/main.js:745:12:
      745 │       handleRequest(packet.id, packet.value);
          ╵             ^

    at handleRequest (/path/to/node_modules/vite/node_modules/esbuild/lib/main.js:745:13)
    at handleIncomingPacket (/path/to/node_modules/vite/node_modules/esbuild/lib/main.js:762:7)
    at Socket.readFromStdout (/path/to/node_modules/vite/node_modules/esbuild/lib/main.js:690:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/@storybook/blocks/dist/index.mjs:81:2422:
      81 │ ...mposeConfigs}from"@storybook/preview-api";import{Channel}from"@storybook/channels";import{DocsContext as DocsContext2}from"@storybook/preview-...

Before updating to Vite v4.3.1 there were no issues with starting Storybook, and none of the config files have changed.

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 18.6.0 - /var/folders/vr/yrskg7qd5fbcj2kyy_8q52jc0000gn/T/yarn--1682465109348-0.43062969347345303/node
    Yarn: 1.22.19 - /var/folders/vr/yrskg7qd5fbcj2kyy_8q52jc0000gn/T/yarn--1682465109348-0.43062969347345303/yarn
    npm: 9.6.0 - ~/Library/Caches/fnm_multishells/91857_1682415868456/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 16.3
  npmPackages:
    @storybook/addon-a11y: ^7.0.7 => 7.0.7 
    @storybook/addon-essentials: ^7.0.7 => 7.0.7 
    @storybook/addon-interactions: ^7.0.7 => 7.0.7 
    @storybook/addon-links: ^7.0.7 => 7.0.7 
    @storybook/react: ^7.0.7 => 7.0.7 
    @storybook/react-vite: ^7.0.7 => 7.0.7

Additional context

No response

[arlukin]

I get a simliar problem but with react-syntax-highlighter.

The plugin "JavaScript plugins" was triggered by this import

    ../../node_modules/react-syntax-highlighter/dist/esm/async-languages/hljs.js:511:4:
      511 │     "highlight.js/lib/languages/lua");

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: 2,4 GHz 8-Core Intel Core i9
  Binaries:
    Node: v14.20.1
    Yarn: 1.22.19
    npm: 6.14.17
  Npm:
    Vite: 4.3.4

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[mauricekleine]

I'm getting the same issue with Chakra UI:

✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

    at handleRequest (/node_modules/esbuild/lib/main.js:728:13)
    at handleIncomingPacket (/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/@chakra-ui/react/dist/index.mjs:54:14:
      54 │ export * from "@chakra-ui/visually-hidden";
         ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Environment Info:

  System:
    OS: macOS 13.3.1 (Ventura)
    CPU: Apple M2 Pro
  Binaries:
    Node: v18.16.0
    npm: 9.5.1
  Npm:
    Vite: 4.3.5
  Storybook:
    "@storybook/addon-essentials": "~7.0.9",
    "@storybook/addon-interactions": "~7.0.9",
    "@storybook/addon-links": "~7.0.9",
    "@storybook/blocks": "~7.0.9",
    "@storybook/react": "~7.0.9",
    "@storybook/react-vite": "~7.0.9",
    "@storybook/testing-library": "~0.1.0",
    "storybook": "~7.0.9",
    "@vitejs/plugin-react": "~4.0.0",
    "vite": "~4.3.5",

I'm unable to run a reproduction on Stackblitz with the same project setup unfortunately. I've tried to debug why, but I was unable to reach a conclusion. I still hope this adds some information though in order to find the root cause

[mauricekleine]

When I downgrade to Vite v4.2 (4.2.2), I still don't get Storybook to work, but it's throwing different errors in case this helps (the other package versions are all the same as above):

✘ [ERROR] Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/client-logger.js

✘ [ERROR] Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/channel-postmessage.js

✘ [ERROR] Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/client-api.js

✘ [ERROR] Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/preview-api.js

✘ [ERROR] Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/preview-web.js

1:06:31 PM [vite] error while updating dependencies:
Error: Build failed with 5 errors:
error: Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/client-logger.js
error: Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/channel-postmessage.js
error: Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/client-api.js
error: Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/preview-api.js
error: Could not read from file: /node_modules/.cache/vite-plugin-externals/@storybook/preview-web.js
    at failureErrorWithLog (/node_modules/esbuild/lib/main.js:1636:15)
    at /node_modules/esbuild/lib/main.js:1048:25
    at runOnEndCallbacks (/node_modules/esbuild/lib/main.js:1471:45)
    at buildResponseToResult (/node_modules/esbuild/lib/main.js:1046:7)
    at /node_modules/esbuild/lib/main.js:1058:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/node_modules/esbuild/lib/main.js:1057:54)
    at handleRequest (/node_modules/esbuild/lib/main.js:723:19)
    at handleIncomingPacket (/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

1:06:06 PM [vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/storybook-stories.js
      at ModuleGraph.updateModuleInfo (file:///node_modules/vite/dist/node/chunks/dep-d305c21f.js:61493:29)
      at TransformContext.transform (file:///node_modules/vite/dist/node/chunks/dep-d305c21f.js:41746:57)
      at async Object.transform (file:///node_modules/vite/dist/node/chunks/dep-d305c21f.js:43464:30)
      at async loadAndTransform (file:///node_modules/vite/dist/node/chunks/dep-d305c21f.js:41182:29) (x16)

[mauricekleine]

Potentially similar issues, that also mention React Syntax Highlighter (@arlukin):

• https://github.com/withastro/astro/issues/6631
• https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/519

I'd like to stress that my project does not use React Syntax Highlighter though

[mauricekleine]

One thing that consistently (but not permanently) fixes this issue for me:

$ rm -rf node_modules
$ npm i
$ npm run storybook # <-- this still throws the errors from the previous comments
$ npm update vite # <-- this does ... something that fixes the errors

up to date, audited 2134 packages in 1s # <-- so nothing actually changed
# [output suppressed]

$ git status # <-- verifying that nothing changed
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

$ npm run storybook
# [output suppressed]
1:58:08 PM [vite] ✨ new dependencies optimized: @storybook/react/preview, @storybook/addon-a11y/preview, @storybook/addon-links/preview, @storybook/addon-essentials/docs/preview, @storybook/addon-essentials/actions/preview, @storybook/addon-essentials/backgrounds/preview, @storybook/addon-essentials/measure/preview, @storybook/addon-essentials/outline/preview, @storybook/addon-essentials/highlight/preview, @storybook/addon-interactions/preview
# [output suppressed]

And now it works 🤯

If I repeat the cycle, the first npm run storybook fails again, but the second one (after running npm update vite) works.

The Vite version in my package-lock.json is also unchanged (4.3.5) after I run npm update vite

Ps. # [output suppressed] messages added by myself for brevity

[kinoli]

Same issue for me. My storybook keeps flickering and lots of terminal messages with The plugin "JavaScript plugins" was triggered by this import coming through. We're doing conversion from webpack 4 to vite and Storybook 6 to 7. Can't really complete it until storybook is working.

Update: I also see this error at the top of my terminal, [vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting'). Indicating theres some issue with vite.

[ddx32]

I'm also seeing this behavior after updating from webpack 5 + Babel to Vite + react-swc and Storybook 6 -> 7.

Invalid command: on-resolve [plugin JavaScript plugins]

The error gets triggered by all sorts of imports in the app, its dependencies and Storybook itself

[mauricekleine]

In addition to @kinoli's error, I also see get [vite] Internal server error: Cannot read properties of undefined (reading 'url'). It seems to be an issue with Vite's import analysis plugin?

Complete output containing these errors:

[vite] Internal server error: Cannot read properties of undefined (reading 'url')
  Plugin: vite:import-analysis
  File: /path/to/project/src/features/activities/activity-preview.stories.tsx
      at TransformContext.transform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:40788:113)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.transform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42883:30)
      at async loadAndTransform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:53349:29)
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
11:05:55 AM [vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')
  Plugin: vite:import-analysis
  File: /path/to/project/node_modules/vite/dist/client/client.mjs
      at ModuleGraph.updateModuleInfo (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:61869:29)
      at TransformContext.transform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:40825:57)
      at async Object.transform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42883:30)
      at async loadAndTransform (file:///path/to/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:53349:29)

[mauricekleine]

Possible related issue with Vite itself:

• https://github.com/vitejs/vite/issues/13030

[wmitsuda]

I'm seeing the same issue, trying to isolate it.

I figured out that it occurs on vite 4.3.0, but not in 4.2.2 (latest from 4.2 series).

Could someone confirm it?

[lana-k]

I had the same issue when migrated the project from webpack/vue2 to vite/vue3. This command fixed the issue in my case:

rm -rf node_modules/.cache

I found it here: https://www.npmjs.com/package/@storybook/builder-vite#migration-from-webpack--cra I hope it helps someone too :-)

[wmitsuda]

I had the same issue when migrated the project from webpack/vue2 to vite/vue3. This command fixed the issue in my case:

rm -rf node_modules/.cache

just tried it and that doesn't work for me (sb + vite 4.3), same error.

[eifr-vault]

Possible related issue with Vite itself:

• Cannot read properties of undefined (reading 'isSelfAccepting') vitejs/vite#13030

just upgraded to vite 4.3.8 which includes this fix and still having the blinking issue

[ryota-murakami]

@shilman This is reproduction. https://github.com/storybookjs/storybook/issues/22661

[IanVS]

I believe the fix in Vite 4.3.8 was related to the isSelfAccepting issue. Is anyone still getting that error after upgrading to that version or above?

As for the blinking, @ryota-murakami, @arlukin, that appears to be caused by an issue in react-syntax-highlighter: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/519 and its (lack of) compatibility with esbuild (which vite uses during dev).

[ryota-murakami]

@IanVS Thank you for your investigation, I'll follow react-syntax-highlighter side.

[eifr-vault]

@IanVS thank you for the investigation! in the console im getting reports for so many imports which im not getting on vite dev or preview or build... only on storybook

The plugin "JavaScript plugins" was triggered by this import

    node_modules/@material-ui/pickers/esm/index.js:35:7:
      35 │ import '@material-ui/core/Popover';

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/@storybook/blocks/dist/index.mjs:16:103:
      16 │ import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS, GLOBALS_UPDATED, NAVIGATE_URL } from '@storybook/core-events';

      The plugin "JavaScript plugins" was triggered by this import

    node_modules/recharts/es6/util/ChartUtils.js:33:26:
      33 │ import * as d3Scales from 'd3-scale';

EDIT: BTW, it's not happening on vite 4.2.3

[IanVS]

@eifr-vault ah, yeah I see those in the reproduction from @ryota-murakami as well. I'll see if I can figure out what's causing those.

[FutureKode]

I can confirm that storybooks works with vite 4.2.3, but with 4.3.* I see a ton of errors like this:

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/rc-picker/es/RangePicker.js:14:23:
      14 │ import * as React from 'react';
         ╵                        ~~~~~~~

✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);

[IanVS]

It seems like this might be related to an issue in Vite/esbuild that occurs when a build is cancelled and then restarted in a short time. If anyone is able to reproduce it without using Storybook, it would be great to submit the issue to Vite.

[IanVS]

In the meantime, you might be able to work around the issue by ensuring that all of your dependencies that are CJS only are listed in your optimizeDeps.include array in the vite config. I haven't checked, but that might help.

[eifr]

@IanVS optimizeDeps.entries workaround worked until Storybook 7.0.20

[IanVS]

I've had this occur once in a while too now. I'm hopeful that vite 4.4 may fix it. In the meantime, clearing the cache and restarting storybook seems to work for me.

[MarkLyck]

I'm getting this error with @radix-ui/react-use-previous:

Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

    at handleRequest (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:728:13)
    at handleIncomingPacket (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:511:28)
    at addChunk (node:internal/streams/readable:332:12)
    at readableAddChunk (node:internal/streams/readable:305:9)
    at Readable.push (node:internal/streams/readable:242:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/.pnpm/@radix-ui+react-switch@1.0.3_@types+react-dom@18.2.4_@types+react@18.2.11_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-switch/dist/index.mjs:7:48:
      7 │ import {usePrevious as $irPIl$usePrevious} from "@radix-ui/react-use-previous";

I tried clearing the cache, updating vite, restarting storybook etc. But nothing is working for me.

on vite; 4.3.9 and storybook: 7.0.20

[segevfiner]

Also happens to us with lowlight which imports highlight.js in some other big monorepo project in a vanilla Vite configuration using Vite 4.3.9. No idea how to reproduce this. I sure hope this will get resolved in the next Vite version :(

[segevfiner]

I think the trigger in our case was https://github.com/vitejs/vite/issues/13505

[mightym]

Also happens to me on vite@4.3.9 and storybook@7.0.18

[craftgear]

I've downgraded vite from 4.3.9 to 4.1.4 and now storybook@7.0.18 works.

ref: https://github.com/storybookjs/storybook/issues/22808#issue-1726935613

[ins0]

I see this issue only bubble up when i locally link internal packages from a mono repo for local development. With no yarn link the dev server is working fine.

From time to time the DEV Server will start fine but in 95% the server will hang in an restart loop caused by the error "✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]" from multiple packages.

Currently this issue prevents us from upgrading 4.2.3.

[ryota-murakami]

@ins0 You mean downgrade Vite to 4.2.3 from 4.3.x?

[ins0]

Correct, but this was a mistake on my end - wrong tab - wrong repo - this is more likely an error with vite and not storybook itself.

[jfairley]

I had this issue, and during research, I noticed that storybook's vite builder apprently doesn't load the vite.config.ts. (?)

https://github.com/storybookjs/builder-vite#customize-vite-config

The builder will not read your vite.config.js file by default.

I'm not 100% sure how much I understand what they're saying, because there are things it does seem to pick up...

Anyway, my app is converted from CRA and needs babel macros, so I added "vite-plugin-babel-macros" (which I already have in my vite.config.ts). After this change, these error messages went away for me.

Expand below for my full main.ts:

.storybook/main.ts

```ts import type { StorybookConfig } from "@storybook/react-vite"; import { mergeConfig } from "vite"; import macrosPlugin from "vite-plugin-babel-macros"; process.env.JEST_JUNIT_OUTPUT_DIR = "reports/storybook"; export default { addons: [ "@storybook/addon-a11y", "@storybook/addon-coverage", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@storybook/addon-storysource", ], core: { builder: "@storybook/builder-vite" }, docs: { autodocs: true }, framework: { name: "@storybook/react-vite", options: {}, }, stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], staticDirs: ["../public"], viteFinal: async (config) => mergeConfig(config, { plugins: [macrosPlugin()], }), } satisfies StorybookConfig; ```

[stephenhebert]

Downgrading Vite to v4.1.5 is required in my case

[Digital-Coder]

as @craftgear mentioned, In my case I had to downgrade even more to vite@4.1.4

[IanVS]

@jfairley that is true in storybook 6.5, which is what the repo you found is used in, but in Storybook 7.0+, the vite config is read and used.

[okxiaoliang4]

sudo pnpm dev resolve this. but why?

[FutureKode]

I am still seeing issues with Vite v4.4.4 and Storybook v7.1. Is anyone else still having issues? Or is there some fix available?

This is the error in the terminal after starting storybook: Error: The server is being restarted or closed. Request is outdated

This is the error in the browser console: GET http://localhost:9009/sb-preview/runtime.js net::ERR_ABORTED 404 (Not Found)

[stdavis]

I was still having this issue as well at vite v4.4.* + storybook v7.1. I had to downgrade to vite v4.2.2 to get it working again.

[humarkx]

reverting back to vite 4.1.4 solved that for me

[eifr-vault]

reverting back to vite 4.1.4 solved that for me

Also ended up doing the same (but had the manually modify some packages in node_modules as newer vite fixes are not included in older version of vite)

[jayarjo]

I've upgraded Storybook to the latest v7.1.1 version and it seems to work for me with Vite v4.3.9.

[jcq]

Still seeing this w/ Storybook 7.2

[woodreamz]

Do we have an idea on the solution? This issue seems to be there since few versions, it'S still there in storybook 7.2.0 and vite 4.4.8.

[IanVS]

I've talked to the Vite folks, and they don't really know what's causing this either. As far as I know, it's not an issue with Storybook specifically, but I can't say for sure. Ideally we would find some way to reproduce this without Storybook to help Vite/esbuild troubleshoot the problem.

[segevfiner]

I've talked to the Vite folks, and they don't really know what's causing this either. As far as I know, it's not an issue with Storybook specifically, but I can't say for sure. Ideally we would find some way to reproduce this without Storybook to help Vite/esbuild troubleshoot the problem.

I think it happens when Vite restarts during optimizeDeps, one thing that triggered this for me was vitejs/vite#13505

[woodreamz]

I've talked to the Vite folks, and they don't really know what's causing this either. As far as I know, it's not an issue with Storybook specifically, but I can't say for sure. Ideally we would find some way to reproduce this without Storybook to help Vite/esbuild troubleshoot the problem.

Thanks for the update! I understand it's not an easy one to fix... I just got the issue when updating vite to 4.4.8 and storybook to 7.2.0 but never had before. Surprisingly, downgrading storybook to 7.1.1 and keeping vite to 4.4.8 fixes the issue :/

[IanVS]

Surprisingly, downgrading storybook to 7.1.1 and keeping vite to 4.4.8 fixes the issue :/

@woodreamz, I've hit the issue occasionally before, and it seems to be intermittent. If I clear my node_modules and re-install, it usually resolves. I imagine that's likely what happened to you. I don't think there's any actual change between SB 7.1.1 and 7.2 that would have made a difference in this issue.

[Flamenco]

I have had this issue for months, on another project. I have been pinned to Vite 4.2.3 that entire time. I tried everything mentioned here and on other threads.

Eventually, I tried this:

Open the developer tools in your browser and clear the cache. Then refresh.

I am not sure if deleting node_modules/.cache contributed to the fix or not, but I did not get the errors to go away until I actually reset my browser cache.

[GerroDen]

Deleting the node_modules/.cache directory only sometimes helped me. The wierdest thing is, that everything is fine and suddenly this error occures on another day when starting the dev mode.

In our case, we use a monorepo with several workspaces with yarn. We also made an exception how vite is linked within the yarn config.