Bundle error in build-storybook

[AlejandroArmenteros]

Hi!,

I try to use storybook with my application, but when i use the build-storybook something wrong occurs. I must to say that npm run start-storybook works great, it's only a build fault.

I thought it was for my own configuration, but i pull this repository (concretly the official-storybook example in master), after an npm install, exec npm run build-storybook and try to open index.html with a webserver.

I don't know if i'm doing something wrong 😢

[Hypnosphi]

try to open index.html with a webserver

What exactly is the command that you use for it?

[AlejandroArmenteros]

@Hypnosphi, I'm using Chrome Extension webserver.

[Hypnosphi]

Weird, works OK for me. You said "open index.html", but this extention only allows to specify directory

[AlejandroArmenteros]

yep, i mean specified the bundle's directory and check the option "automatically show index.html" or open the url "/index.html".

[Hypnosphi]

Which npm version are you using?

npm -v

[AlejandroArmenteros]

5.7.1

[Hypnosphi]

Yes, I use the same. But actually the correct way to build this example is this:

yarn install # using yarn is important because we use yarn workspaces feature
yarn bootstrap --core
cd examples/official-storybook
yarn build-storybook

[AlejandroArmenteros]

$ yarn install && yarn bootstrap --core

yarn install v1.5.1
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > @angular/common@5.2.9" has unmet peer dependency "rxjs@^5.5.0".
warning " > @angular/core@5.2.9" has unmet peer dependency "rxjs@^5.5.0".
warning " > @angular/core@5.2.9" has unmet peer dependency "zone.js@^0.8.4".
warning " > @angular/forms@5.2.9" has unmet peer dependency "rxjs@^5.5.0".
warning "jest-preset-angular > jest-zone-patch@0.0.8" has unmet peer dependency "zone.js@>=0.7.5".
warning " > jest-vue-preprocessor@1.4.0" has unmet peer dependency "vue-template-compiler@2.5.x".
warning " > jest-vue-preprocessor@1.4.0" has unmet peer dependency "vue-template-es2015-compiler@1.6.x".
warning " > polymer-webpack-loader@2.0.2" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/polymer@3.4.0-rc.3" has unmet peer dependency "babel-runtime@>=6.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/react-native@3.4.0-rc.3" has unmet peer dependency "babel-runtime@>=6.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/react-native@3.4.0-rc.3" has unmet peer dependency "react-native@>=0.51.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/react@3.4.0-rc.3" has unmet peer dependency "babel-runtime@>=6.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/vue@3.4.0-rc.3" has unmet peer dependency "babel-runtime@>=6.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/vue@3.4.0-rc.3" has unmet peer dependency "vue@2.5.16".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/vue@3.4.0-rc.3" has unmet peer dependency "vue-loader@14.2.1".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/vue@3.4.0-rc.3" has unmet peer dependency "vue-template-compiler@2.5.16".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql@0.11.11" has incorrect peer dependency "graphql@^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/vue > vue-loader@14.2.1" has unmet peer dependency "css-loader@*".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > angular-cli > @angular/compiler-cli@5.2.9" has incorrect peer dependency "typescript@>=2.4.2 <2.7".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql > codemirror-graphql@0.6.12" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-knobs > style-loader > schema-utils@0.4.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql > codemirror-graphql > graphql-language-service-interface@1.0.18" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql > codemirror-graphql > graphql-language-service-interface > graphql-language-service-types@1.0.18" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql > codemirror-graphql > graphql-language-service-interface > graphql-language-service-utils@1.0.18" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0".
warning "workspace-aggregator-c018064b-82a5-4db0-9df1-dabae469d9a5 > @storybook/addon-graphql > graphiql > codemirror-graphql > graphql-language-service-parser > graphql-language-service-types@0.1.14" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0".
[5/5] 📃  Building fresh packages...
✨  Done in 812.98s.
yarn run v1.5.1
$ node ./scripts/bootstrap.js --core
storybook info bootstrap Core & Examples (core)
storybook info bootstrap yarn workspace
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
success Already up-to-date.
storybook info bootstrap prepare
lerna info version 2.5.1
lerna WARN ECYCLE Encountered a cycle in the dependency graph.This may cause instability! Packages in cycle are: "@storybook/addon-a11y", "@storybook/addon-actions", "@storybook/addon-graphql", "@storybook/addon-info", "@storybook/addon-jest", "@storybook/addon-knobs", "@storybook/addon-links", "@storybook/addon-notes", "@storybook/addon-options", "@storybook/addon-storyshots", "@storybook/addon-storysource", "@storybook/addon-viewport", "@storybook/angular", "@storybook/polymer", "@storybook/react-native", "@storybook/react", "@storybook/vue", "@storybook/components", "@storybook/core", "@storybook/ui"
lerna WARN ECYCLE Encountered a cycle in the dependency graph.This may cause instability! Packages in cycle are: "@storybook/addon-a11y", "@storybook/addon-actions", "@storybook/addon-info", "@storybook/addon-jest", "@storybook/addon-knobs", "@storybook/addon-links", "@storybook/addon-storyshots", "@storybook/addon-storysource", "@storybook/addon-viewport", "@storybook/angular", "@storybook/polymer", "@storybook/react-native", "@storybook/vue", "@storybook/components", "@storybook/core", "@storybook/ui"
Built: @storybook/addon-backgrounds@3.4.0-rc.3
Built: @storybook/addon-centered@3.4.0-rc.3
Built: @storybook/addon-events@3.4.0-rc.3
Built: @storybook/addons@3.4.0-rc.3
Built: @storybook/channels@3.4.0-rc.3
Built: @storybook/client-logger@3.4.0-rc.3
Built: @storybook/codemod@3.4.0-rc.3
Built: @storybook/node-logger@3.4.0-rc.3
Built: @storybook/channel-postmessage@3.4.0-rc.3
Built: @storybook/channel-websocket@3.4.0-rc.3
Built: @storybook/react@3.4.0-rc.3
Built: @storybook/addon-graphql@3.4.0-rc.3
Built: @storybook/addon-notes@3.4.0-rc.3
Built: @storybook/addon-options@3.4.0-rc.3
Built: @storybook/components@3.4.0-rc.3
Built: @storybook/addon-a11y@3.4.0-rc.3
Built: @storybook/addon-actions@3.4.0-rc.3
Built: @storybook/addon-jest@3.4.0-rc.3
Built: @storybook/addon-knobs@3.4.0-rc.3
Built: @storybook/addon-links@3.4.0-rc.3
Built: @storybook/addon-storysource@3.4.0-rc.3
Built: @storybook/addon-viewport@3.4.0-rc.3
Built: @storybook/addon-info@3.4.0-rc.3
Built: @storybook/addon-storyshots@3.4.0-rc.3
Built: @storybook/ui@3.4.0-rc.3
Built: @storybook/core@3.4.0-rc.3
Built: @storybook/angular@3.4.0-rc.3
Built: @storybook/polymer@3.4.0-rc.3
Built: @storybook/react-native@3.4.0-rc.3
Built: @storybook/vue@3.4.0-rc.3
lerna success run Ran npm script 'prepare' in packages:
lerna success - @storybook/addon-a11y
lerna success - @storybook/addon-actions
lerna success - @storybook/addon-backgrounds
lerna success - @storybook/addon-centered
lerna success - @storybook/addon-events
lerna success - @storybook/addon-graphql
lerna success - @storybook/addon-info
lerna success - @storybook/addon-jest
lerna success - @storybook/addon-knobs
lerna success - @storybook/addon-links
lerna success - @storybook/addon-notes
lerna success - @storybook/addon-options
lerna success - @storybook/addon-storyshots
lerna success - @storybook/addon-storysource
lerna success - @storybook/addon-viewport
lerna success - @storybook/angular
lerna success - @storybook/polymer
lerna success - @storybook/react-native
lerna success - @storybook/react
lerna success - @storybook/vue
lerna success - @storybook/addons
lerna success - @storybook/channel-postmessage
lerna success - @storybook/channel-websocket
lerna success - @storybook/channels
lerna success - @storybook/client-logger
lerna success - @storybook/codemod
lerna success - @storybook/components
lerna success - @storybook/core
lerna success - @storybook/node-logger
lerna success - @storybook/ui
✨  Done in 178.11s.

$ cd examples/official-storybook $ yarn build-storybook

yarn run v1.5.1
$ build-storybook -c ./ -s built-storybooks
info @storybook/react v3.4.0-rc.3
info 
info => Loading custom addons config.
info => Loading custom webpack config (extending mode).
info => Copying static files from: built-storybooks
cp: no such file or directory: built-storybooks/angular-cli
cp: no such file or directory: built-storybooks/cra-kitchen-sink
cp: no such file or directory: built-storybooks/polymer-cli
cp: no such file or directory: built-storybooks/vue-kitchen-sink
info Building storybook ...
info Building storybook completed.
✨  Done in 47.33s.

And i have the same result :S

here are my versions:

$ npm -v
5.7.1
$ yarn -v
1.5.1
$ node -v
v9.4.0

[AlejandroArmenteros]

i detect other interesting thing:

Like you see in the image, if i go to iframe.html with specifics query params, works great.

In another case, adding some query params, the page breaks like i explained before

[Hypnosphi]

That's super weird. Is it Chrome, right? On which OS? Can you please share what's shown in network tab of your devtools?

[AlejandroArmenteros]

i know :S... Yep is chrome in MacOs.

Ofc, here it is:

[AlejandroArmenteros]

I solved the error :S the webserver mod-rewrite was activated (for SPA)

Now works Perfectly

Thanks so much for you help!! and sorry for troubles :D

[awgeorge]

This error is happening on MacOS safari Version 11.1 (13605.1.33.1.4)

Storybook 3.4.8

It happens when serving the storyboard-static file using serve

serve -s storybook-static

[mnogueron]

@awgeorge You might already have found a solution for your issue, but for those still having problems: go to the folder you want to serve and only run serve.

serve -s storybook-static rewrite all not-found requests to storybook-static/index.html and for some raison breaks Storybook rendering.