Next.js 13 (with app dir) useSession must be wrapped in SessionProvider

[uixmat]

Hey Tom, struggling to get your package working as intended. I'm using the new app directory in Next.js 13, Storybook is playing nice until i try useSession on my storybook component and i'm thrown the following error:

[next-auth]: `useSession` must be wrapped in a <SessionProvider />

have you encountered the same issue or could advise how to fix ?

[emiliosheinz]

Hei, I'm not using the app directory and it is happening to me also 😕

You can check the version of the libraries that I'm using here

When I run yarn storybook and access any component that uses the useSession hook, the following error happens:

Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
    at useSession (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:59653:11)
    at Header (http://localhost:6006/main.1654ec985e2dc7ed9025.hot-update.js:30:80)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:87702:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:91466:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:92979:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:98818:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97949:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97858:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97826:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97242:20)

🚨 If you prefer you can just clone and checkout the docs/storybook-config branch and run it yourself!

Please, let me know if you have any questions, it would be really nice to have some help with this!

[emiliosheinz]

Hei @mattsince87 I've created a fork fixing this problem since we got no response from the maintainer. Please, check it out here and let e know if it works for you!

[TomFreudenberg]

Hi @emiliosheinz

thanks for working out and giving support.

I was on a project-trip and back for the first day.

Check that out - will you send a PR?

[TomFreudenberg]

@emiliosheinz - wondering why you have decoupled the codes into a new separate storybook package ?!

[emiliosheinz]

@TomFreudenberg Hei, since it was my first time working with addons I've created an addon based on Addon Kit from StoryBook and your current code. So it is not only a fork. Actually, I was trying to have a better understanding of everything.

Are you open to improving the structure of this repo, and trying to follow some of the best practices used in Addon Kit? I would be happy to help you with this and open a fix.

[TomFreudenberg]

Sure - I am always against doing things against each other and duplicate work.

Have you seen, that the repo is not only containing a storybook addon but also component for jest. So my interest was to setup a general next-auth mockup library. This concept should still be retained.

Looking forward to your fix and ideas.

[emiliosheinz]

Yes, I got it!

I'll open a pull request with the fix and in the future, we can discuss things like using TypeScript for example.

[TomFreudenberg]

Typescript is welcome ;-)

[emiliosheinz]

@TomFreudenberg Just to see if my guess makes sense... After some debugging it seems that the actual problem is that next-auth is listed in the dependencies and not in the peerDependencies. And when the project and library next-auth version are not the same this bug happens.

[TomFreudenberg]

That makes absolute sense! I would say it's the gotcha!

[TomFreudenberg]

So will you send a short fix PR?

Afterwards we can follow up with some improvements.

[emiliosheinz]

I just opened a pull request #6. Please, take a look!

[TomFreudenberg]

@mattsince87

We have updated the package to version 0.5.6 as @emiliosheinz figured out that dependencies were causing the error.

Please leave some feedback if the issue could be closed by now.

Thanks in advance
Tom