Storybook 7 Issues

Get Help and Help Others
1

I recently upgraded an app to Redwood v6.1.0, which upgraded Storybook to version 7. After the update, any component with a hook stopped working in Storybook. I get errors like :
Cannot read properties of null (reading ‘useRef’)
Cannot read properties of null (reading ‘useContext’)
Cannot read properties of null (reading ‘useState’)

If the component doesn’t have hooks, everything works exactly like it did before the upgrade. I’ve searched the web every way I can think of and have found very little info. Have any of you guys encountered this problem, and if so, what is the solution?

1 Like
2

Recently we did update our app to Redwood v6 and Storybook v7 too, and we have 2 problems with it:

  • Even using same version and trying fresh install, we always get a @redwoodjs/web copy inside @redwoodjs/testing node_modules. It was reported in previous versions here, seems to be a yarn issue, not a Redwood one, but it impacts since Redwood mocks hooks. We put a postInstall script in the package.json to remove that copy.

  • Redwood CLI for storybook has the --build option, but it doesn’t work anymore. Our live storybook is working, but the built version show errors for all stories. Like:

TypeError: Cannot destructure property 'id' of 'defaultExport' as it is undefined.
    at normalizeComponentAnnotations (http://127.0.0.1:6006/sb-preview/runtime.js:38:1146)

and

ReferenceError: mockGraphQLQuery is not defined
    at 73027 (http://127.0.0.1:6006/main.8a400961.iframe.bundle.js:2:146437)

We intend to use Storybook tests in our Github Actions pipeline. Storybook test runner is well documented, and it’s based on a static build. When we try to use live version in the pipeline, all tests get timeout:

thrown: "Exceeded timeout of 15000 ms for a test.

[1824](https://github.com/xxxxxxx/web/actions/runs/6251749512/job/16973563478#step:8:1825)[TEST] Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."
1 Like