Redwood: Storybook not working with `pathname` in `useLocation` hook in @redwoodjs/router

[hemildesai]

Redwood 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)

[peterp]

Hey @hemildesai, this is totally not redundant; could you share your repo with me? This use case should certainly work.

[hemildesai]

Hi @peterp, I don't have a fully committed repo yet since I am only experimenting, but I think I have found the issue. Here are the details:

I have a component called Header.js as follows:

import { Link, routes, navigate, useLocation } from '@redwoodjs/router'

const data = { path: routes.home() } // This was the issue. I was using routes outside the component function.
export default Header = () => {
// ...component
}

Looks like you need to use routes inside the component.

[peterp]

Ah yeah, that makes sense, since routes are only populated when they're wrapped in a Router, and this code would be run during import and routes wouldn't be populated at this stage.

[hemildesai]

After fixing the above issues, now I have the following problems:

• I'm getting TypeError: Cannot read property 'pathname' of undefined when using const { pathname } = useLocation() inside the same component.

• I also want to add a global decorator to all my stories but it looks like the storybook config is packaged with the @redwood module. It would be nice to provide custom configs.

Let me know if I need to create a separate issue for any of the above topics. Happy to close this one and create new issues.

[peterp]

Thanks for this @hemildesai

Maybe we can rename this issue, and modify the description for the first bullet point.

The second bullet point is one that I know about will support shortly. (I'll create an issue.)

[hemildesai]

Cool, makes sense! I've updated the issue's title and description.

[peterp]

I actually think this issue is now resolved.