Using NextJS PiwikPro package with Storybook

API & integrations
1

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.

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

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

3

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

4

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.

5

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
image1855×410 40.5 KB