Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] --smoke-test crashes with TypeError: previewStats.toJson is not a function #397

Closed
1 task done
AriPerkkio opened this issue May 30, 2022 · 2 comments · Fixed by #400
Closed
1 task done

[Bug] --smoke-test crashes with TypeError: previewStats.toJson is not a function #397

AriPerkkio opened this issue May 30, 2022 · 2 comments · Fixed by #400
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@AriPerkkio
Copy link
Contributor

AriPerkkio commented May 30, 2022 •
edited
Loading

What version of vite are you using?

2.9.9

System info and storybook versions

System:
OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (4) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 8.5.0 - /usr/local/bin/npm
npmPackages:
@storybook/builder-vite: ^0.1.35 => 0.1.35
@storybook/react: ^6.5.6 => 6.5.6

Describe the Bug

Storybook crashes with a @storybook/builder-vite setup when run with start-storybook --smoke-test command.

Crash logs 
$ yarn test:docs
yarn run v1.22.18
$ start-storybook --smoke-test --config-dir config/storybook
info @storybook/react v6.5.6
info 
info => Loading presets

info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished: 
ℹ ｢wdm｣: Hash: 6d33c790d9a847b26162
Version: webpack 4.46.0
Time: 3453ms
Built at: 05/30/2022 4:29:32 PM
                         Asset      Size        Chunks                    Chunk Names
           0.manager.bundle.js   223 KiB             0  [emitted]         
           1.manager.bundle.js   127 KiB             1  [emitted]         
           2.manager.bundle.js   814 KiB             2  [emitted]  [big]  
           3.manager.bundle.js  83.6 KiB             3  [emitted]         
           4.manager.bundle.js  15.8 KiB             4  [emitted]         
           5.manager.bundle.js   295 KiB             5  [emitted]  [big]  
           6.manager.bundle.js  1.36 KiB             6  [emitted]         
                    index.html  3.49 KiB                [emitted]         
        main.manager.bundle.js  1.44 KiB          main  [emitted]         main
runtime~main.manager.bundle.js  8.95 KiB  runtime~main  [emitted]         runtime~main
vendors~main.manager.bundle.js  4.43 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js 40 bytes {main} [built]
[./node_modules/@storybook/addons/dist/esm/public_api.js] 515 bytes [built]
[./node_modules/@storybook/api/dist/esm/index.js] ./node_modules/@storybook/api/dist/esm/index.js + 21 modules 146 KiB {vendors~main} [built]
    | ./node_modules/@storybook/api/dist/esm/index.js 18.9 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/context.js 249 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/store.js 5.57 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/lib/merge.js 844 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/initial-state.js 405 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/lib/stories.js 11.4 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/provider.js 281 bytes [built]
    | ./node_modules/@storybook/api/dist/esm/modules/addons.js 6.02 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/channel.js 1.19 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/notifications.js 2.83 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/settings.js 3.66 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/release-notes.js 3.57 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/refs.js 16.5 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/stories.js 24.6 KiB [built]
    | ./node_modules/@storybook/api/dist/esm/modules/layout.js 8.5 KiB [built]
    |     + 7 hidden modules
[./node_modules/@storybook/api/shortcut.js] 41 bytes {vendors~main} [built]
[./node_modules/@storybook/client-logger/dist/esm/index.js] 4.3 KiB {vendors~main} [built]
[./node_modules/@storybook/components/dist/esm/index.js] 1.74 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 4 modules 22.9 KiB {vendors~main} [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 5.17 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
    | ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 13.2 KiB [built]
    | ./node_modules/@storybook/channel-websocket/dist/esm/index.js 3.26 KiB [built]
[./node_modules/@storybook/core-events/dist/esm/index.js] 4.21 KiB {vendors~main} [built]
[./node_modules/@storybook/router/dist/esm/index.js] 127 KiB {vendors~main} [built]
[./node_modules/@storybook/ui/dist/esm/index.js] 555 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 47 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 24.3 KiB {vendors~main} [built]
    + 883 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.29 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.02 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.

ERR! TypeError: previewStats.toJson is not a function
ERR!     at buildDevStandalone (/workspaces/vite-everything/node_modules/@storybook/core-server/dist/cjs/build-dev.js:144:56)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at buildDev (/workspaces/vite-everything/node_modules/@storybook/core-server/dist/cjs/build-dev.js:176:5)
ERR!  TypeError: previewStats.toJson is not a function
ERR!     at buildDevStandalone (/workspaces/vite-everything/node_modules/@storybook/core-server/dist/cjs/build-dev.js:144:56)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at buildDev (/workspaces/vite-everything/node_modules/@storybook/core-server/dist/cjs/build-dev.js:176:5)

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

info => Loading presets
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The interesting part here is

ERR! TypeError: previewStats.toJson is not a function
ERR!     at buildDevStandalone (/workspaces/vite-everything/node_modules/@storybook/core-server/dist/cjs/build-dev.js:144:56)

which points to these lines in Storybook core: https://github.com/storybookjs/storybook/blob/61d6451c4bfc7eb86f1f7ea2ee6d64b9a5d3a976/lib/core-server/src/build-dev.ts#L111

Logging some of those lines:

96  |   const previewStats = previewResult && previewResult.stats;
    |   console.log('previewResult', previewResult);
    |   // previewResult { bail: [AsyncFunction: bail], stats: {}, totalTime: [ 4, 925423348 ] }
    |
    |   console.log('previewStats', previewStats);
    |   // previewStats {}
    |
111 | const previewWarnings = (previewStats && previewStats.toJson().warnings) || [];
    | // ERR! TypeError: previewStats.toJson is not a function

I'm not familiar with the internals of Storybook, but

  • Should builder-vite pass/generate those previewResult to Storybook core somehow?
  • Are those Webpack specific results which should be handled better on Storybook core's side?

Link to Minimal Reproducible Example

I think all setups should be crashing when run with --smoke-test flag. I can set up a separate minimal repo if this is still necessary.

Participation

  • I am willing to submit a pull request for this issue.
@AriPerkkio AriPerkkio added the bug Something isn't working label May 30, 2022
@AriPerkkio AriPerkkio mentioned this issue May 30, 2022
Merged
@IanVS
Copy link
Member

IanVS commented May 31, 2022 •
edited
Loading

Hi, thanks for catching this, @AriPerkkio. If you'd like to submit a PR, it looks like we should be able to change

builder-vite/packages/builder-vite/index.ts

Line 71 in e9da98e

stats: {} as ViteStats,
to stats: null,. Stats are a structure that webpack creates, but vite does not. Setting it to null will bail out correctly in the part of the code that uses this, which you identified above.

@AriPerkkio
Copy link
Contributor Author

Thanks for the pointers. I'll do some manual testing in my project and set up a PR with the fix.

@IanVS IanVS added the good first issue Good for newcomers label May 31, 2022
This was referenced May 31, 2022
Merged
Merged
IanVS pushed a commit that referenced this issue May 31, 2022
@AriPerkkio
fix: prevent crashing on "--smoke-test" (#400)
2ad9c38 
Fixes #397.

Storybook expects `stats` to match `Stats` interface of `webpack`: https://github.com/webpack/webpack/blob/main/types.d.ts#L11243-L11253.

This type-mismatch is caused by `@storybook/core-common`'s `Builder` and will be fixed by storybookjs/storybook#18377.

- Pass null as optional Stats instead of incorrect structure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: prevent crashing on "--smoke-test" AriPerkkio/builder-vite
2 participants
@IanVS @AriPerkkio