[Bug]: Fails to start using Vite v4.3 (esbuild error) #22253
Comments
|
I get a simliar problem but with react-syntax-highlighter. |
|
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! 🙏 |
|
I'm getting the same issue with Chakra UI: 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 |
|
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): |
|
Potentially similar issues, that also mention React Syntax Highlighter (@arlukin):
I'd like to stress that my project does not use React Syntax Highlighter though |
|
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 The Vite version in my Ps. |
|
Same issue for me. My storybook keeps flickering and lots of terminal messages with Update: I also see this error at the top of my terminal, |
|
I'm also seeing this behavior after updating from webpack 5 + Babel to Vite + react-swc and Storybook 6 -> 7.
The error gets triggered by all sorts of imports in the app, its dependencies and Storybook itself |
|
In addition to @kinoli's error, I also see get Complete output containing these errors: |
|
Possible related issue with Vite itself: |
|
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? |
|
I had the same issue when migrated the project from webpack/vue2 to vite/vue3. This command fixed the issue in my case: I found it here: https://www.npmjs.com/package/@storybook/builder-vite#migration-from-webpack--cra |
just tried it and that doesn't work for me (sb + vite 4.3), same error. |
just upgraded to vite |
|
I believe the fix in Vite 4.3.8 was related to the As for the blinking, @ryota-murakami, @arlukin, that appears to be caused by an issue in react-syntax-highlighter: react-syntax-highlighter/react-syntax-highlighter#519 and its (lack of) compatibility with esbuild (which vite uses during dev). |
|
@IanVS Thank you for your investigation, I'll follow react-syntax-highlighter side. |
|
@IanVS thank you for the investigation! in the console im getting reports for so many imports which im not getting on 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: |
|
@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. |
IanVS
changed the title
|
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); |
|
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. |
|
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 |
|
Deleting the 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. |
|
@GerroDen Yes we are experiencing the same issue still, and have reverted back to vite 4.2.3. |
|
I don't know whether this is related, but I had to boot a couple plugins to make my storybook work. in 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...
Another tweak I have (unrelated to storybook) is in plugins: [
// ...
mode === "production" && process.env.CYPRESS !== "true" && checker({ typescript: true }),
]
The lesson is just comment out your plugins one at a time and see if you make progress. YMMV |
|
@jfairley Thanks for the tips, I noticed the server was restarting on .env changes: 
By adding this in viteFinal: async (config) => {
return mergeConfig(config, {
server: {
watch: {
ignored: ['**/.env.*', '**/coverage/**'],
},
},
});
}, |
|
I also notice my server restarting on 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 |
|
@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 Edit: I have the |
|
@IanVS I don't change anything in the file, I don't know why it detects a change. The message appears on start. |
|
Vite logs, it detects updates on |
|
@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 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; |
|
Thanks, the ignoring helps in my case for the Another fun fact to me is, that with every browser reload, vite detects new plugins to optimize: Both updates appeared after a reload in the browser! |
|
I also facing rapid .env file changing, but this is solved after migrate yarn v1 to pnpm in my case. main.ts import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/addon-mdx-gfm'
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default configpreview.tsx import type { Preview } from '@storybook/react'
import { initialize, mswDecorator } from 'msw-storybook-addon'
import { Provider as ReduxStoreProvider } from 'react-redux'
import { store } from '../src/redux/store'
import { handlers } from '../mocks/handlers'
import '../src/index.css'
// Initialize MSW
initialize()
const preview: Preview = {
parameters: {
msw: { handlers: [...handlers] },
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
decorators: [
mswDecorator,
(Story) => (
<ReduxStoreProvider store={store}>
<Story />
</ReduxStoreProvider>
),
],
}
export default previewpackage.json {
"name": "nsx",
"private": "true",
"version": "0.0.1",
"license": "MIT",
"author": "Ryota Murakami",
"homepage": "https://github.com/laststance/nsx",
"msw": {
"workerDirectory": "public"
},
"volta": {
"node": "18.17.1"
},
"dependencies": {
"@headlessui/react": "^1.7.16",
"@heroicons/react": "^2.0.18",
"@hookform/resolvers": "^3.2.0",
"@reduxjs/toolkit": "2.0.0-alpha.6",
"@sentry/react": "^7.63.0",
"@sentry/tracing": "^7.63.0",
"bcrypt": "^5.1.0",
"body-parser": "^1.20.2",
"chalk": "^4.1.2",
"clsx": "^2.0.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"cron": "^2.4.0",
"express": "^4.18.2",
"express-oas-generator": "^1.0.46",
"history": "^5.3.0",
"jsonwebtoken": "^9.0.1",
"morgan": "^1.10.0",
"mysql2": "^3.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-ga4": "^2.1.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.45.4",
"react-markdown": "^8.0.7",
"react-redux": "^8.1.2",
"react-router-dom": "^6.15.0",
"react-spinners": "^0.13.8",
"redux": "5.0.0-alpha.6",
"redux-first-history": "^5.1.1",
"redux-persist": "^6.0.0",
"rehype-raw": "^6.1.1",
"remark-breaks": "^3.0.3",
"remark-gfm": "^3.0.1",
"sequelize": "^6.32.1",
"superstruct": "^1.0.3",
"web-vitals": "^3.4.0"
},
"devDependencies": {
"@faker-js/faker": "^8.0.2",
"@hookform/devtools": "^4.3.1",
"@redocly/cli": "^1.0.2",
"@storybook/addon-essentials": "^7.2.2",
"@storybook/addon-interactions": "^7.2.2",
"@storybook/addon-links": "^7.2.2",
"@storybook/addon-mdx-gfm": "^7.2.2",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.2.2",
"@storybook/react": "^7.2.2",
"@storybook/react-vite": "^7.2.2",
"@storybook/testing-library": "^0.2.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.4",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.9",
"@testing-library/dom": "^9.3.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/assert": "^1.5.6",
"@types/bcrypt": "^5.0.0",
"@types/body-parser": "^1.19.2",
"@types/compression": "^1.7.2",
"@types/cookie-parser": "^1.4.3",
"@types/cors": "^2.8.13",
"@types/express": "^4.17.17",
"@types/jsonwebtoken": "^9.0.2",
"@types/morgan": "^1.9.4",
"@types/node": "^20.4.9",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@types/react-helmet": "^6.1.6",
"@types/react-syntax-highlighter": "^15.5.7",
"@types/testing-library__jest-dom": "^5.14.9",
"@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^6.3.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"@vitest/ui": "^0.34.1",
"all-contributors-cli": "^6.26.1",
"autoprefixer": "^10.4.14",
"concurrently": "^8.2.0",
"cross-env": "^7.0.3",
"cypress": "^12.17.3",
"cypress-slow-down": "^1.2.1",
"dotenv": "^16.3.1",
"dotenv-cli": "^7.2.1",
"eslint": "^8.46.0",
"eslint-config-ts-prefixer": "^0.22.0",
"eslint-import-resolver-typescript": "^3.6.0",
"eslint-plugin-cypress": "^2.14.0",
"eslint-plugin-import": "^2.28.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.33.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-sort-keys-fix": "^1.1.2",
"eslint-plugin-storybook": "^0.6.13",
"jsdom": "^22.1.0",
"msw": "^1.2.3",
"msw-storybook-addon": "^1.8.0",
"node-fetch": "^3.3.2",
"nodemon": "^3.0.1",
"postcss": "^8.4.27",
"prettier": "^3.0.1",
"prettier-plugin-tailwindcss": "^0.5.1",
"rimraf": "^5.0.1",
"sequelize-cli": "^6.6.1",
"serve": "^14.2.0",
"storybook": "^7.2.2",
"tailwindcss": "^3.3.3",
"ts-node": "^10.9.1",
"ts-node-dev": "^2.0.0",
"typescript": "^5.1.6",
"vite": "^4.4.9",
"vite-plugin-environment": "^1.1.3",
"vitest": "^0.34.1",
"vitest-matchmedia-mock": "^1.0.2"
},
"scripts": {
"start": "vite",
"dev": "vite",
"build": "dotenv -e .env.prod vite build",
"preview": "vite preview",
"serve": "serve build",
"test": "dotenv -e .env.test -- vitest",
"lint": "eslint . --ext .ts,.tsx,.js,jsx --report-unused-disable-directives",
"lint:fix": "eslint . --ext .ts,.tsx,.js,jsx --fix --report-unused-disable-directives",
"typecheck": "tsc --noEmit",
"clean": "rimraf yarn.lock node_modules build server_build storybook-static",
"prettier": "prettier --write \"**/*.+(js|ts|tsx|json|yml|css|md|mdx)\"",
"storybook": "dotenv -e .env.storybook -- storybook dev -p 6006",
"build-storybook": "dotenv -e .env.storybook -- storybook build",
"serve:storybook": "serve storybook-static",
"server:start": "cross-env NODE_ENV=development nodemon --ext ts,js --watch 'server/index.ts' --ignore './src' --exec ts-node --files --project server/tsconfig.json server/index.ts",
"server:build": "tsc -p server/tsconfig.json && cp -r server/db/migrations server_build && cp server/db/config.json server_build/server/db/config.json",
"deploy": "bash scripts/deploy",
"workflow:deploy": "yarn build && yarn server:build && yarn deploy",
"validate": "./scripts/validate",
"openapi": "redocly preview-docs openapi_v3.json",
"db:hashgen": "node server/db/scripts/passhashgen.js",
"db:reset": "yarn db:drop && yarn db:create && yarn db:migrate && yarn db:seed:all",
"db:truncate": "yarn db:drop && yarn db:create && yarn db:migrate",
"db:create": "sequelize db:create",
"db:drop": "sequelize db:drop",
"db:migrate": "sequelize db:migrate",
"db:seed": "sequelize db:seed",
"db:seed:undo": "sequelize db:seed:undo",
"db:seed:all": "sequelize db:seed:all",
"db:seed:undo:all": "sequelize db:seed:undo:all",
"cy:open": "cypress open",
"e2e:admin": "cypress run --headed --spec cypress/e2e/admin_basic.cy.js",
"e2e:admin:headless": "cypress run --spec cypress/e2e/admin_basic.cy.js",
"e2e:visitor": "cypress run --headed --spec cypress/e2e/visitor_basic.cy.js",
"e2e:visitor:headless": "cypress run --spec cypress/e2e/visitor_basic.cy.js",
"e2e:new-install-user": "cypress run --headed --spec cypress/e2e/new_isntalled_user_flow.cy.js",
"e2e:admin:firefox": "cypress run --headed -b firefox --spec cypress/e2e/admin_basic.cy.js",
"e2e:visitor:firefox": "cypress run --headed -b firefox --spec cypress/e2e/visitor_basic.cy.js"
}
}
|
Thanks all! I have also managed to fix the issue by ignoring the An additional piece of information I've gathered is that this behavior was actually caused by the addon |
|
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'],
},
};
}); |
|
@eifr-vault did you also try to ignore any |
i don't know how I missed the previous comments lol |
|
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 |
|
Tried to debug it a little in some setup I have and it looks to me like this is the cause: paulmillr/chokidar#1286 |
|
@segevfiner oh so it's a Mac issue. I'm using Mac. 💡 |
|
Confirming that manually patching |
|
Good news! I'll close this out now, but please let us know if you continue to have issues with this. |
|
|
|
Deleting node_modules and reinstalling it with yarn solve it. |
and others
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:
Then after this there are lots of the following for many packages:
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.7Additional context
No response
The text was updated successfully, but these errors were encountered: