Storybook not working with `pathname` in `useLocation` hook in @redwoodjs/router
See original GitHub issueRedwood version: 0.14.0
I have a component that calls routes.home() and other routes. When I try to run yarn rw sb I get the following error in Storybook at http://localhost:7910/?path=/story/components-flashmessage--generatedand everything else is disable:
redwoodjs_router__WEBPACK_IMPORTED_MODULE_5_.routes.home is not a function
I looked around but couldn’t find a similar issue. Apologies if this is redundant.
I have a component that calls const { pathname } = useLocation() from @redwoodjs/router. When I run yarn rw sb and go to that component, I get the following error:
TypeError: Cannot read property 'pathname' of undefined
at Header (http://localhost:7910/main.30c1ecd41527b17ff017.bundle.js:291:31)
at renderWithHooks (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:97537:18)
at mountIndeterminateComponent (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:100216:13)
at beginWork (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:101330:16)
at HTMLUnknownElement.callCallback (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:82922:14)
at Object.invokeGuardedCallbackDev (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:82971:16)
at invokeGuardedCallback (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:83026:31)
at beginWork$1 (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:105937:7)
at performUnitOfWork (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:104888:12)
at workLoopSync (http://localhost:7910/vendors~main.30c1ecd41527b17ff017.bundle.js:104864:22)
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (9 by maintainers)
Top Results From Across the Web
useLocation().pathname in react-router-dom is changing, but ...
Have you tried subscribing for change in location.pathname in your hook?: useEffect(() => { //Checks if location.pathname is not "/".
Read more >React Router v6 Addon | Storybook: Frontend workshop for UI ...
To add the router to all the stories of a component, simply add it to the decorators array. Note that the parameters.reactRouter property...
Read more >How to mock location inside storybook stories? - torrito - Medium
If your component is expecting to be wrapped into Router you can mimic this by wrapping it into MemoryRouter inside your stories: import...
Read more >Router | RedwoodJS Docs
Redwood uses the useAuth hook under the hood to determine if the user is authenticated. Read more about authentication in Redwood here. Link...
Read more >How to mock React Router v6 inside Storybook stories with ...
When developing components in Storybook and also working with React ... With this decorator, we use the useLocation hook of React Router to ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Before my fix
After my fix
@Tobbe sorry for the late feedback. The new version works perfectly. Thanks guys!