Cannot read property 'prefetch' of null error on StoryBook

[hems]

Bug report

Describe the bug

Cannot read property 'prefetch' of null error is being displayed on StoryBook when making a storybook of an item with <Link> after updating to Next 10

To reproduce

Create a component with the following content:

      <Link href="/" prefetch={false}>
        <Box as="a" justifyItems="center" display="flex">
          ....
        </Box>
      </Link>

Expected behavior

Components should render normally as previously experienced on Next 9.

Currently to work around this issue i'm adding prefetch={false} to the Link objects but that disables the prefetch on the website which is not desirable

Screenshots

System information

• OS: Linux
• Browser (if applies): chrome
• Version of Node.js: 14

[PaulCaruana]

I am having the same issue. If you go back to next 9.5.5 it works then go back 10.0.x it fails. Having said that it appears to a timing issues when doing yarn install. It started working on one of my projects (with 10.0.3) and when I deleted yarn.lock and re-did yarn install it failed. I spent all afternoon trying to figure this out.

[timneutkens]

Duplicate of #16864

[ybrodsky]

#16864 refers to jest. The solutions / hacks provided there dont work on storybook.

[hems]

Duplicate of #16864

indeed the other error is on jest / tests.. not on storybook

[timneutkens]

It's the same issue though.

[ybrodsky]

The proposed solution doesnt work here. Closing this is the same as ignoring it.

[hems]

The proposed solution doesnt work here. Closing this is the same as ignoring it.

@ybrodsky i have made a comment in the other issue, maybe @timneutkens or someone else will be able to help..

[damusnet]

I believe #19857 would solve both but I need help to write the integration test.

[gfortaine]

storybookjs/storybook#12997

       <Link href="/" prefetch={!process.env.STORYBOOK}>
         <Box as="a" justifyItems="center" display="flex">
           ....
         </Box>
       </Link>

[hems]

storybookjs/storybook#12997

       <Link href="/" prefetch={!process.env.STORYBOOK}>
         <Box as="a" justifyItems="center" display="flex">
           ....
         </Box>
       </Link>

Thanks for the suggestion @gfortaine but the solution presented in this comment is cleaner as it doesn't involved modifying the application code, instead, we just mock the router on the storybook.

I can see how checking if the application is running inside of storybook and setting prefetch to false would be great, but that would have to be added to the Router on Next.js and not on all links inside of an application!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.