# Using NextJS PiwikPro package with Storybook

**URL:** <https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246>\
**Category:** API & integrations\
**Created:** [November 16, 2023, 10:48am UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246 "2023-11-16T10:48:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nicky](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@Nicky](https://community.piwik.pro/u/Nicky)\
**Post date:** [November 16, 2023, 10:48am UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246/1 "2023-11-16T10:48:40Z")

</div>

Hi,

We have a Next.js application which uses Storybook as a component library.  
I am having issues when using the usePiwikPro() hook in React components which are used in Storybook stories. Adding PiwikPro to my components effectively breaks the Storybook stories in which they are used. I have tried implementing a decorator to wrap all my stories in the PiwikProProvider, but I keep getting the same error (see below). Furthermore I have tried using storybook addons to mock out PiwikPro, but I had no luck making this work.

```auto
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_classCallCheck_js-node_modules_babel_runtime_h-ed3419.iframe.bundle.js:2421:21)
    at usePiwikPro (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_classCallCheck_js-node_modules_babel_runtime_h-ed3419.iframe.bundle.js:103:61)

```

---

<div class="post-metadata">

**Author:** ![kamil\_grzaba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kamil_grzaba/32/2405_2.png) [@kamil\_grzaba](https://community.piwik.pro/u/kamil_grzaba)\
**Post date:** [November 16, 2023, 11:05am UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246/2 "2023-11-16T11:05:22Z")

</div>

It happens because the app runs in server environment. Our package needs to be run in client components with ‘use-client’ directive. Otherwise You’ll have errors like this

---

<div class="post-metadata">

**Author:** ![Nicky](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@Nicky](https://community.piwik.pro/u/Nicky)\
**Post date:** [November 16, 2023, 11:23am UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246/3 "2023-11-16T11:23:05Z")

</div>

Thanks for the answer. I’ll look into this.

---

<div class="post-metadata">

**Author:** ![Nicky](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@Nicky](https://community.piwik.pro/u/Nicky)\
**Post date:** [November 16, 2023, 12:33pm UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246/4 "2023-11-16T12:33:03Z")

</div>

I realised we had a too high version of the package as you mentioned the use client directive and given that we use NextJS \< 13 , however downgrading to 1.0.4 did not solve the issue.

---

<div class="post-metadata">

**Author:** ![Nicky](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@Nicky](https://community.piwik.pro/u/Nicky)\
**Post date:** [November 17, 2023, 9:42am UTC](https://community.piwik.pro/t/using-nextjs-piwikpro-package-with-storybook/3246/5 "2023-11-17T09:42:49Z")

</div>

This is the error I am seeing, and I want to add that I did wrap the story in the PiwikProProvider, but it still can’t find the context.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/c/c86d122492c1159f09c4123053c637bf8949a14d.png)