search

mswjs / msw-storybook-addon

Mock API requests in Storybook with Mock Service Worker.
https://msw-sb.vercel.app
MIT License
408 stars 39 forks source link

Error after upgrading and replacing mswDecorator with mswLoader - Storybook v7 #92

Closed ddcech closed 1 year ago

ddcech commented 1 year ago

I'm getting an error after upgrading to 1.7.0 and replacing the mswDecorator with mswLoader. Any help would be appreciated. If there is any more info needed to debug, let me know. Thanks.

storybook 7.0.0-beta.31 msw-storybook-addon 1.7.0 msw 0.49.3 react 18.2.0

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:80645:9)
    at reconcileChildFibers (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:81586:7)
    at reconcileChildren (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:84920:28)
    at mountIndeterminateComponent (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:85910:5)
    at beginWork (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:87340:16)
    at beginWork$1 (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:93179:14)
    at performUnitOfWork (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:92310:12)
    at workLoopSync (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:92219:5)
    at renderRootSync (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:92187:7)
    at recoverFromConcurrentError (http://0.0.0.0:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-fa810f.iframe.bundle.js:91603:20)
yannbf commented 1 year ago

Hey @ddcech thanks for reporting! Can you provide a reproduction? It sounds, to me, that somehow a promise is passed and rendered in your component, though a loader does not do that, unless your story has something with loaded. Can you figure out which story is causing that, and share the source here (or make a small reproduction)? thanks!

ddcech commented 1 year ago

I'll try to make a reproduction on codesandbox or new github repo. Please notice I'm using storybook v7 beta not 6 as you have used in your docs. This could be where the issue is originating from. I'm also using CSF 3.0 to render a basic component.

ddcech commented 1 year ago

Issue was on my side. I did not change the exported variable name to loaders, and kept decorators.

export const decorators = [mswDecorator]

should now be

export const loaders = [mswLoader]

@yannbf BTW the release note for 1.7.0 has a typo. you have export const loaders twice.

yannbf commented 1 year ago

Thanks a lot @ddcech ! I updated so other people won't have issues with it.