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

npm up fsevents worked for me

Good news! fsevents@2.3.3 has been released with the fix. Depending on your package manager, you should be able to <pkgmgr> up fsvents (though watch out for pnpm, it may update other unrelated packages: https://github.com/pnpm/pnpm/issues/6657).

I’ll close this out now, but please let us know if you continue to have issues with this.

I also notice my server restarting on .env changes, but they happen when no changes to the file are actually made. Is that what you experience as well? Or are you actually changing the contents of the file?

That’s a good idea to ignore files that are causing problems, but keep in mind that you’ll need to manually restart if you do change a .env file, of course.

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.

@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

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

@jfairley Thanks for the tips, I noticed the server was restarting on .env changes:

By adding this in ./storybook/main.ts, it seems to fix the issue (at least for now):

viteFinal: async (config) => {
    return mergeConfig(config, {
      server: {
        watch: {
          ignored: ['**/.env.*', '**/coverage/**'],
        },
      },
    });
  },

Downgrading Vite to v4.1.5 is required in my case

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 😃

Tried to debug it a little in some setup I have and it looks to me like this is the cause: https://github.com/paulmillr/chokidar/issues/1286

@woodreamz ignoring .env is a brilliant workaround. Vite doesn’t restart in a loop anymore, was able run vite@4.4.9 (latest atm) and storybook@7.2.2 (latest atm)

Full .storybook/main.ts below:

import path from "path";

import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from "vite";

const getAbsolutePath = (packageName: string) =>
  path.dirname(require.resolve(path.join(packageName, 'package.json')));

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-styling"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-vite") as "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  viteFinal: async (config) => {
    return mergeConfig(config, {
      server: {
        watch: {
          // otherwise Vite for some reason detects changes in .env.* files and ends up in restart loop 
          ignored: ['**/.env.*'],
        },
      },
    });
  },
};

export default config;

I don’t know whether this is related, but I had to boot a couple plugins to make my storybook work.

in .storybook/main.ts:

  viteFinal: (config) =>
    mergeConfig(
      Object.assign({}, config, {
        plugins: config.plugins?.filter((plugin) => !["vite:dts", "vite-plugin-checker"].includes(plugin?.["name"])),
      }),
      {
        server: {
          watch: {
            ignored: ["**/.env.test", "**/coverage/**"],
          },
        },
      },
    ),

IIRC…

• vite-plugin-checker is unquestionably the one plugin I use that just prevents storybook from ever starting
• vite:dts (vite-plugin-dts) doesn’t prevent storybook from running but yarfs warnings

Another tweak I have (unrelated to storybook) is in vite.config.ts.

  plugins: [
    // ...
    mode === "production" && process.env.CYPRESS !== "true" && checker({ typescript: true }),
  ]

• vite optimize doesn’t like vite-plugin-checker (hence mode === "production")
• Cypress also doesn’t like vite-plugin-checker.

The lesson is just comment out your plugins one at a time and see if you make progress. YMMV

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)

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

@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.

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

Deleting node_modules and reinstalling it with yarn solve it.

Still seeing this w/ Storybook 7.2

sudo pnpm dev resolve this. but why?

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

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

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?

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

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

Confirming that manually patching fsevents fixes this issue on Mac

https://github.com/fsevents/fsevents/commit/63709df0fd91549050e2e3f38b1695f49f6387a8

function getFileType(flags) {
  if (events.ItemIsFile & flags) return "file";
  if (events.ItemIsDir & flags) return "directory";
  if (events.MustScanSubDirs & flags) return "directory";  // <--- add this line
  if (events.ItemIsSymlink & flags) return "symlink";
}

Same issue here, but then not with the storybooks. I’m using NX however, and it keeps restarting due to file changes that really did not happen.

When downgrading to Vite 4.1.4 it indeed seems solved. However it does really suck, and should be an issue

ignoring env did fix some of the issues but I’m still getting this ^

vite.config:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import macrosPlugin from 'vite-plugin-babel-macros';
import svgrPlugin from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(() => {
  return {
    plugins: [
      react(
        process.env.CYPRESS === 'true'
          ? { babel: { plugins: ['istanbul'] } }
          : undefined
      ),
      tsconfigPaths(),
      svgrPlugin({ svgrOptions: { icon: true } }),
      macrosPlugin(),
    ],
    build: {
      sourcemap: true,
      outDir: 'dist',
    },
    server: {
      port: 8080,
      strictPort: true,
      host: 'eifr.test',
    },
    optimizeDeps: {
      include: ['@material-ui/pickers', 'd3'],
    },
  };
});

@IanVS Ah yes, definitely, I should’ve mentioned that too. My storybook was also looping due to supposed changes to my .env files, though I had not changed them at all. That is why I added the server.watch.ignored section.

Edit: I have the **/coverage/** part because I’m using @storybook/test-runner, and writes to coverage also cause restarts.

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.

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.

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

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.

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.

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

reverting back to vite 4.1.4 solved that for me

@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.

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

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.

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.

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

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