You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using Storybook in a fullstack app using Laravel Breeze, Inertia.js and React. Storybook works fine except for components that use functions from Inertia. For example, this component uses the usePage hook, which enables it to access components passed to the page (a parent React component) from the Laravel backend with Inertia:
Trying to access it on Storybook leads to this error:
usePage must be used within the Inertia component
q2@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@inertiajs_react.js?v=1752daa7:3861:11
CatCard@http://localhost:6006/resources/js/Components/CatCard/CatCard.tsx?t=1715334296532:24:44
renderWithHooks@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:12171:35
mountIndeterminateComponent@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:14921:21
beginWork@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:15902:22
beginWork$1@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:19749:22
performUnitOfWork@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:19194:20
workLoopSync@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:19133:30
renderRootSync@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:19112:15
recoverFromConcurrentError@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:18732:42
performConcurrentWorkOnRoot@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:18680:30
workLoop@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:197:50
flushWork@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:176:22
performWorkUntilDeadline@http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-M7BJ2XST.js?v=1752daa7:384:29
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
I'm using Storybook in a fullstack app using Laravel Breeze, Inertia.js and React. Storybook works fine except for components that use functions from Inertia. For example, this component uses the
usePage
hook, which enables it to access components passed to the page (a parent React component) from the Laravel backend with Inertia:Trying to access it on Storybook leads to this error:
Additional information
.storybook/main.ts
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions