← All Articles

Solving Storybook runtime issue with "Object prototype may only be an Object or null: undefined"

Posted on

What’s the problem

After upgrading dependencies in my React project to resolve 8,200 vulnerabilities in our project (that was free of vulnerabilities only 3 months ago), storybook fails to open with the following error Object prototype may only be an Object or null: undefined

Goals

  • Fix storybook without affecting the application flow, meaning touch only files that are used by the Storybook.

Technical Information

The project is using:

  • nrwl as a toolchain (amazing framework btw)
  • Storybook version v5.3.19 Create react app is not being used directly as it is a given by NRWL and storybook.

Figuring out the Problem

Although in my case the error appeared to be a @reduxjs/toolkit issue, it is actually an issue with create-reacא-app that is using an outdated version of "immer":"1.10.0" when redux toolkit calls enableES5().

kaltura-path@0.0.0 /Users/eransakal/dev/github/kaltura/path-composer
├─┬ @reduxjs/toolkit@1.4.0
│ └── immer@7.0.7 
├─┬ @storybook/react@5.3.19
│ └─┬ react-dev-utils@9.1.0
│   └── immer@1.10.0 
└── immer@7.0.7 

There is already a fix for that as a PR in create-react-app #8933 pending to be merged.

Solution

I could try to upgrade Storybook but since I’m using the latest Storybook version of 5.3.x (5.3.19) and upgrading to 6.x seems painful (see the migration page) - I preferred to pick a workaround instead.

Workaround

following https://github.com/reduxjs/redux-toolkit/issues/476:

  1. add a direct dependency to immer@7.0.7 to enforce that version over 1.10.0.
  2. under .storybook/preview.js I added the following comment
/* 
NOTICE: Immer dependency in react-dev-utils is outdated and needs to be updated https://github.com/facebook/create-react-app/issues/8750

Since we depend on the create-react-app provided by NRWL and Storybook, we cannot upgrade it at the moment on our own. To bypass it we picked https://github.com/reduxjs/redux-toolkit/issues/476 workaround
 by adding a direct dependency to the library immer@7.0.7.

During the next upgrade, check out https://github.com/facebook/create-react-app/pull/8933 and if NRWL / Storybook doesn't use the outdated version anymore, you can remove the comment and the direct dependency to immer 
*/

In my case, I didn’t need to add the following lines as mentioned in the source because it worked as-is after upgrading the immer library.

// wasn't needed in my case - adding here as a reference
import { enableES5 } from 'immer'; 
enableES5();

Follow-ups

As stated above, remove the direct dependency to the immer library once upgrading NRWL / Storybook to a version that doesn’t use the outdated version of the immer library.