[Bug]: Cannot start service: Host version "0.18.20" does not match binary version "0.19.7"

[J4v4Scr1pt]

Describe the bug

I get this error when I start storybook:

> storybook dev -p 6006

@storybook/cli v7.6.17

X [ERROR] Cannot start service: Host version "0.18.20" does not match binary version "0.19.7"

1 error
Error: The service was stopped
    at .\node_modules\.pnpm\registry.npmjs.org+esbuild@0.18.20\node_modules\esbuild\lib\main.js:826:29
    at responseCallbacks.<computed> (.\node_modules\.pnpm\registry.npmjs.org+esbuild@0.18.20\node_modules\esbuild\lib\main.js:703:9)
    at Socket.afterClose (.\node_modules\.pnpm\registry.npmjs.org+esbuild@0.18.20\node_modules\esbuild\lib\main.js:693:28)
    at Socket.emit (node:events:526:35)
    at endReadableNT (node:internal/streams/readable:1376:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

When I did install latest Storybook 7.6.17 I noticed this:

 WARN  Issues with peer dependencies found
.
└─┬ @storybook/react-vite 7.6.17
  └─┬ @vitejs/plugin-react 3.1.0
    └── ✕ unmet peer vite@^4.1.0-beta.0: found 5.1.3

Changed my vite version to 4.1.0-beta.0 now storybook works again.

But the thing is that I have been using vite 5 since November without any problems.

To Reproduce

Install all latest versions and vite 5. This is my package.json:

{
	"name": "@X/components",
	"version": "0.7.12",
	"type": "module",
	"main": "dist/main.js",
	"types": "dist/main.d.ts",
	"files": [
		"dist"
	],
	"scripts": {
		"preinstall": "npx only-allow pnpm",
		"prepublishOnly": "pnpm run build-sb",
		"sb": "storybook dev -p 6006",
		"build-sb": "vite build --config vitePublish.config.ts",
		"chromatic": "npx chromatic --auto-accept-changes --project-token=xxxxxxxxxxxxxx",
		"build-storybook": "sb build",
		"refreshVSToken": "npx vsts-npm-auth -config .npmrc"
	},
	"peerDependencies": {
		"@nextui-org/react": "^2.2.9",
		"framer-motion": "^11.0.5",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"tailwind-variants": "^0.2.0",
		"tailwindcss": "^3.4.1",
		"clsx": "^2.1.0",
		"tailwind-merge": "^2.2.1"
	},
	"devDependencies": {
		"@nextui-org/react": "^2.2.9",
		"@storybook/addon-a11y": "^7.6.17",
		"@storybook/addon-actions": "^7.6.17",
		"@storybook/addon-essentials": "^7.6.17",
		"@storybook/addon-interactions": "^7.6.17",
		"@storybook/addon-links": "^7.6.17",
		"@storybook/addon-onboarding": "^1.0.11",
		"@storybook/addon-styling": "^1.3.7",
		"@storybook/blocks": "^7.6.17",
		"@storybook/manager-api": "^7.6.17",
		"@storybook/react": "^7.6.17",
		"@storybook/react-vite": "^7.6.17",
		"@storybook/theming": "^7.6.17",
		"@types/node": "20.11.19",
		"@types/react": "18.2.57",
		"@types/react-dom": "18.2.19",
		"@typescript-eslint/eslint-plugin": "^7.0.2",
		"@typescript-eslint/parser": "^7.0.2",
		"@vitejs/plugin-react": "^4.2.1",
		"autoprefixer": "^10.4.17",
		"chromatic": "^10.9.6",
		"eslint": "8.56.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-react-hooks": "^4.6.0",
		"eslint-plugin-react-refresh": "^0.4.5",
		"eslint-plugin-storybook": "^0.8.0",
		"framer-motion": "^11.0.5",
		"glob": "^10.3.10",
		"postcss": "^8.4.35",
		"prettier": "3.2.5",
		"prettier-plugin-tailwindcss": "^0.5.11",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"rollup-plugin-preserve-directives": "^0.4.0",
		"storybook": "^7.6.17",
		"tailwind-variants": "^0.2.0",
		"tailwindcss": "^3.4.1",
		"typescript": "^5.3.3",
		"vite": "^4.5.2",
		"vite-plugin-dts": "^3.7.2",
		"vite-plugin-lib-inject-css": "^1.3.0",
		"clsx": "^2.1.0",
		"tailwind-merge": "^2.2.1"
	}
}

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz   
  Binaries:
    Node: 20.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.8.0 - ~\AppData\Local\pnpm\pnpm.EXE <----- active
  Browsers:
    Edge: Chromium (121.0.2277.128)
  npmPackages:
    @storybook/addon-a11y: ^7.6.17 => 7.6.17
    @storybook/addon-actions: ^7.6.17 => 7.6.17
    @storybook/addon-essentials: ^7.6.17 => 7.6.17
    @storybook/addon-interactions: ^7.6.17 => 7.6.17
    @storybook/addon-links: ^7.6.17 => 7.6.17
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11
    @storybook/addon-styling: ^1.3.7 => 1.3.7
    @storybook/blocks: ^7.6.17 => 7.6.17
    @storybook/manager-api: ^7.6.17 => 7.6.17
    @storybook/react: ^7.6.17 => 7.6.17
    @storybook/react-vite: ^7.6.17 => 7.6.17
    @storybook/theming: ^7.6.17 => 7.6.17
    chromatic: ^10.9.6 => 10.9.6
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^7.6.17 => 7.6.17

Additional context

No response

[vanessayuenn]

Hi, thanks for reporting this. Are you able to reproduce this reliably? If so, can you please create a shareable reproduction via storybook.new? We prioritize bug reports that have reproduction. Thank you! 🙏

[J4v4Scr1pt]

thx 4 the answer, unfortunately I can't reproduce it... I tried forking one of the projects in storybook.new and replacing with package.json. It worked. I also tried latest storybook 8 in my project but still the error. Then I guess there is something else affecting this. I will stay on lower vite version, that works still :).

[vanessayuenn]

This sounds like it could be a versioning issue; hard to say without a repro. If you haven't already, can you please try to remove lock files, node_modules, yarn/npm cache, and reinstall?

[MarkusJLechner]

just got the same error. removed node_modules with lock, cleared npm cache, upgraded to last beta @storybook/cli v8.0.0 beta.5.

First i got this error:

✘ [ERROR] Cannot start service: Host version "0.18.20" does not match binary version "0.19.11"

1 error
Error: The service was stopped: write EPIPE
    at ./node_modules/@storybook/cli/node_modules/esbuild/lib/main.js:1083:25
    at responseCallbacks.<computed> (./node_modules/@storybook/cli/node_modules/esbuild/lib/main.js:703:9)
    at afterClose (./node_modules/@storybook/cli/node_modules/esbuild/lib/main.js:693:28)
    at ./node_modules/@storybook/cli/node_modules/esbuild/lib/main.js:2143:11
    at onwriteError (node:internal/streams/writable:418:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:84:21)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Now i get following error:

✘ [ERROR] Cannot start service: Host version "0.19.12" does not match binary version "0.18.20"

1 error
failed to load config from /home/markus/dev/hc/vite.config.js
=> Failed to build the preview
Error: The service was stopped: write EPIPE
    at ./node_modules/vite/node_modules/esbuild/lib/main.js:1084:25
    at responseCallbacks.<computed> (./node_modules/vite/node_modules/esbuild/lib/main.js:704:9)
    at afterClose (./node_modules/vite/node_modules/esbuild/lib/main.js:694:28)
    at ./node_modules/vite/node_modules/esbuild/lib/main.js:2172:11
    at onwriteError (node:internal/streams/writable:418:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:84:21)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Looks like Host and Binary version error flipped.
I have no idea how to debug this 😅

Edit:
Got this with npm list esbuild

> sail npm list esbuild
project@5.0.131 /var/www/web
+-- @storybook/addon-essentials@8.0.0-beta.1
| `-- @storybook/core-common@8.0.0-beta.1
|   +-- esbuild-register@3.5.0
|   | `-- esbuild@0.19.11 deduped
|   `-- esbuild@0.18.20
+-- @storybook/vue3-vite@8.0.0-beta.1
| `-- @storybook/core-server@8.0.0-beta.1
|   `-- @storybook/builder-manager@8.0.0-beta.1
|     +-- @yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15
|     | `-- esbuild@0.19.11 deduped
|     `-- esbuild@0.18.20
`-- vite@5.0.11
  `-- esbuild@0.19.11

Edit2:
I temporarly changed from npm to pnpm and used resolution overwrite

"pnpm": {
        "overrides": {
            "esbuild": "0.19.11"
        }
    }

With this i got it to work. Npm does not easily support these overwrites and i can't stick to pnpm.

Looks like vite now upgraded
"esbuild": "^0.19.3"

Where storybook core-common uses
"esbuild": "^0.18.0",

And these conflict

[vanessayuenn]

thanks @MarkusJLechner that's helpful context! i think that should be enough to get us started on investigating it.

[J4v4Scr1pt]

Nice @MarkusJLechner, I totally missed the second anwser by vanessayuenn.. sorry for that!

[ndelangen]

I think this PR might help #26255

npm does, in fact, support overrides:
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

[MarkusJLechner]

Thanks, didn't know that

works now with

    "overrides": {
        "@storybook/builder-manager": {
            "esbuild": "0.19.11"
        }
    }

[ndelangen]

@MarkusJLechner do you still have a reproduction for me to try?
I'd love to close this ticked as solved, but without a repro I've tested I can't be sure.

You might also try to remove the overrides-field, then try upgrading to the latest storybook rc version: npx storybook@next upgrade.

And let us know if it's solved?

[MarkusJLechner]

Thanks for the fix!
I'll try when rc-3 is ready for upgrade. Currently, @next upgrade installed rc-2

[vanessayuenn]

@MarkusJLechner rc-3 has just been released! Please try it out and report back 🙂

[MarkusJLechner]

In vite there was a esbuild upgrade to 0.20 (vitejs/vite#16062), but they just reverted back to ^0.19.3 (vitejs/vite#16072) because of a problem.

I now get the error Cannot start service: Host version "0.20.1" does not match binary version "0.19.11".

> npm list esbuild
+-- @storybook/addon-essentials@8.0.0-beta.1
| `-- @storybook/core-common@8.0.0-beta.1
|   +-- esbuild-register@3.5.0
|   | `-- esbuild@0.19.11 deduped
|   `-- esbuild@0.18.20
+-- @storybook/vue3-vite@8.0.0-beta.1
| `-- @storybook/core-server@8.0.0-beta.1
|   `-- @storybook/builder-manager@8.0.0-beta.1
|     +-- @yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15
|     | `-- esbuild@0.19.11 deduped
|     `-- esbuild@0.18.20
+-- storybook@8.0.0-rc.3
| `-- @storybook/cli@8.0.0-rc.3
|   +-- @storybook/core-common@8.0.0-rc.3
|   | `-- esbuild@0.20.1
|   `-- @storybook/core-server@8.0.0-rc.3
|     `-- @storybook/builder-manager@8.0.0-rc.3
|       `-- esbuild@0.20.1 deduped
`-- vite@5.0.11
  `-- esbuild@0.19.11

I have no idea how this can be solved better than with the overwrite. We installed Storybook into an existing Vite project, which may have caused issues due to version conflicts. Other than this esbuild version mismatch, we have encountered no other problems. If Vite is upgraded again to 0.20, the problem will be resolved, but it may occur again in the future.

[ndelangen]

@vanessayuenn @shilman it sounds like esbuild upgrade is the right thing to do, but if the version mismatches between vite and storybook it could cause issues... How should we proceed?

[vanessayuenn]

We might just have to surface the workaround with overrides better, otherwise this is gonna be a cat and mouse game. @kylegach is there a good place to put this in the documentation?