builder-vite: Basic init setup fails to run Storybook [React, Typescript]

Hi!

Problem: Storybook fails to start when doing the basic example with React and Typescript.

System 1 (I tried in 2 laptops)

Node v16.13.0
npm v8.1.0
macOS Monterey v12.0.1

System :

Node v14.15.4
npm 7.6.0
macOS Big Sur v11.6

Steps

npm init vite@latest
Choose react and react-ts
cd into the project and run npm install && npm run dev: it all works fine
Now run npx sb@next init --builder storybook-builder-vite (this works fine)
Now run npm run storybook

Error Storybook crashes, logs:

> npm run storybook

> vite-app@0.0.0 storybook
> start-storybook -p 6006

info @storybook/react v6.4.0-beta.26
info
info => Loading presets
info => Using prebuilt manager
Pre-bundling dependencies:
  react
  react-dom
  @base2/pretty-print-object
  @emotion/core
  @emotion/is-prop-valid
  (...and 70 more)
(this will be run only when your dependencies or config have changed)
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.4.0-beta.26 for React started        │
│   648 ms for preview                               │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.88.20:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@storybook_client-api.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@storybook_client-logger.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@storybook_react.js" points to missing source files
[BABEL] Note: The code generator has deoptimised the styling of /Users/amina/Documents/Projects/vite-app/node_modules/.vite/chunk-MHXLKORO.js?v=e8b96788 as it exceeds the max of 500KB.
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/chunk-AKDXD5X2.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/regenerator-runtime_runtime_js.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/react.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@mdx-js_react.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/chunk-PHBKWG7E.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/chunk-35YZ7F37.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/ts-dedent.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@storybook_addon-docs.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/chunk-JQLGGSPV.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/util-deprecate.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/prop-types.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/global.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/react-element-to-jsx-string/dist/esm/index.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/@storybook_csf.js" points to missing source files
Sourcemap for "/Users/amina/Documents/Projects/vite-app/node_modules/.vite/qs.js" points to missing source files
node:events:368
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: invalid status code 56853
    at Receiver$1.controlMessage (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:50517:18)
    at Receiver$1.getData (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:50385:42)
    at Receiver$1.startLoop (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:50110:22)
    at Receiver$1._write (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:50045:10)
    at writeOrBuffer (node:internal/streams/writable:389:12)
    at _write (node:internal/streams/writable:330:10)
    at Receiver$1.Writable.write (node:internal/streams/writable:334:10)
    at Socket.socketOnData (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:52459:37)
    at Socket.emit (node:events:402:35)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at TCP.onStreamRead (node:internal/stream_base_commons:199:23)
Emitted 'error' event on WebSocket$2 instance at:
    at Receiver$1.receiverOnError (/Users/amina/Documents/Projects/vite-app/node_modules/vite/dist/node/chunks/dep-85dbaaa7.js:52346:13)
    at Receiver$1.emit (node:events:390:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'WS_ERR_INVALID_CLOSE_CODE',
  [Symbol(status-code)]: 1002

This is a great project btw! A time saver for sure. I can’t figure out what’s going on, I appreciate any suggestions.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 22 (12 by maintainers)

Commits related to this issue

fix: Workaround for Storybook websocket issue. The previous commit broke development-mode Storybook because of this: https://github.com/eirslett/storybook-builder-vite/issues/139 This commit works ... — committed to hackworthltd/primer-app by dhess 3 years ago
Merge #132 132: fix: Workaround for Storybook websocket issue. r=dhess a=dhess The previous commit broke development-mode Storybook because of this: https://github.com/eirslett/storybook-builder-... — committed to hackworthltd/primer-app by deleted user 3 years ago
fix: Remove Storybook workaround. The workaround introduced in 8eb813e3dac7f9e690618843021cbdc31635dc4c for https://github.com/eirslett/storybook-builder-vite/issues/139 is no longer needed, as it's ... — committed to hackworthltd/primer-app by dhess 3 years ago

Most upvoted comments

I was having a similar issue, then I did this:

// .storybook/main.js
async viteFinal(config) {
    config.server.port = 6001; 
    config.server.https = false;
    config.server.host = true;
    config.server.hmr =  {
      port: 443,
      protocol: 'ws'
    }

    return config
  }
}

and it solved for me (reference https://github.com/vitejs/vite/pull/1926#issuecomment-774728965)

fsblemos on Nov 3, 2021

Storybook 6.4.0-rc.0 has just been released, and I’ve verified that it works with the vite-builder out of the box with no config changes needed. So for those in this thread, I suggest you revert the changes you made to your viteFinal, and upgrade to the release candidate. I’ll close this out, but feel free to open a new issue if you continue to have problems with the latest version of storybook.

IanVS on Nov 12, 2021

OMG… thank you for fixing this. I just ran 6.4.0-beta.33 and can confirm the hot reload is fixed 😃

alb3rtuk on Nov 12, 2021

Fix here: https://github.com/storybookjs/storybook/pull/16665. Thanks for th tip @nvitius – kinda obvious I know but makes my life a lot easier to have these pointers 😉

tmeasday on Nov 14, 2021

@tmeasday I was able to reproduce this by just creating a new vite project and adding storybook:

npm init vite@latest
npx sb@next init --builder storybook-builder-vite

nVitius on Nov 10, 2021

I posted a similar bug over on Storybook — https://github.com/storybookjs/storybook/issues/16616 — and got sent over here. Pleased to say the fix in this thread solved my problem running Storybook.

However, building Storybook still fails:

$ build-storybook
info @storybook/html v6.4.0-beta.29
info 
info => Cleaning outputDir: /Users/scott/Sites/storybook-vite/storybook-static
info => Loading presets
ERR! TypeError: Cannot set property 'port' of undefined
ERR!     at Object.viteFinal (/Users/scott/Sites/storybook-vite/.storybook/main.js:4:24)
ERR!     at /Users/scott/Sites/storybook-vite/node_modules/@storybook/core-common/dist/cjs/presets.js:279:28
ERR!  TypeError: Cannot set property 'port' of undefined
ERR!     at Object.viteFinal (/Users/scott/Sites/storybook-vite/.storybook/main.js:4:24)
ERR!     at /Users/scott/Sites/storybook-vite/node_modules/@storybook/core-common/dist/cjs/presets.js:279:28
error Command failed with exit code 1.

I was able to fix that by updating the Vite config to only apply to development:

async viteFinal(config, { configType }) {
  if (configType === "DEVELOPMENT") {
    // customize the Vite config here
    config.server.port = 6001;
    config.server.https = false;
    config.server.host = true;
    config.server.hmr = {
      port: 443,
      protocol: "ws",
    };
  }

  // return the customized config
  return config;
},

spaceninja on Nov 6, 2021

Yes, it sounds like that is what we should do.

IanVS on Nov 4, 2021

The latest beta has moved from SSE to websockets for conveying Story index changes from node to the browser, so that’s probably what’s different cc @tmeasday

shilman on Nov 4, 2021