Yet another Cannot convert undefined or null to object

[jayliu50]

Describe the bug

A completely white screen shows. When navigating to the Controls tab within add-ons.

In the console is the following error

vendors~main.manager.bundle.js:8275 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at selectedKey (vendors~main.manager.bundle.js:8275)
    at SingleSelect (vendors~main.manager.bundle.js:8557)
    at renderWithHooks (vendors~main.manager.bundle.js:105343)
    at mountIndeterminateComponent (vendors~main.manager.bundle.js:108169)
    at beginWork (vendors~main.manager.bundle.js:109407)
    at HTMLUnknownElement.callCallback (vendors~main.manager.bundle.js:94303)
    at Object.invokeGuardedCallbackDev (vendors~main.manager.bundle.js:94352)
    at invokeGuardedCallback (vendors~main.manager.bundle.js:94414)
    at beginWork$1 (vendors~main.manager.bundle.js:114317)

When stepping through, it appears that options is always undefined.

Going up one frame in the stack reveals the following

... strange, because this is how I pass in the argTypes

color: {
    options: Object.values(ColorOptions),
    control: {
      type: 'select',
      labels: ColorOptions,
    },
  },

where ColorOptions is

export const ColorOptions = Object.freeze({
  BLACK: 'black',
  BLUE: 'blue',
  RED: 'red',
});

Unlike #14631, It doesn't relate to addon-docs, but instead I addon-controls, I believe.

To Reproduce

I have no idea. It has no rhyme or reason.

Let's say in A.stories.js has story for A.jsx and B.stories.js has a story for B.jsx:

In A.stories.js, I get an error, and in B.stories.js there is no error, even though both have the exact same object passed as argTypes.

I swap stories, such that A.stories.js has a story for B.jsx and B.stories.js has a story for A.jsx:

In A.stories.js I continue to have an error, and in B.stories.js I continue to not have an error.

---

to make it more concrete.

This file has an error:

Thumbnail.stories.js:

import React from 'react';
import Thumbnail from './';
import { standardArgs, standardArgTypes} from '../../../utils/storybook';

export default {
  title: 'User Interface/Elements',
  argTypes: standardArgTypes,
  args: standardArgs,
};

export const NotebookThumbnailStory = ({ ...args }) => <Thumbnail {...args} />;

NotebookThumbnailStory.storyName = 'Notebook Thumbnail'

This file has no error

Sidebar.stories.js

import React from 'react';
import { standardArgs, standardArgTypes } from '../../../utils/storybook';
import NotebookTab from './NotebookTab';

export default {
  title: 'User Interface/Sidebar',
  argTypes: standardArgTypes,
  args: standardArgs,
};

export const NotebookTabStory = ({ ...args }) => (
  <Thumbnail {...args}></Thumbnail>
);

NotebookTabStory.storyName = 'Notebook Tab';

---

Hopefully, I've proven that it doesn't matter what the standardArgTypes are. I was able to swap out the NotebookTab component with Thumbnail, and I get the same result (with one of them working)

System
Environment Info:

  System:
    OS: Linux 5.4 Pengwin 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.11.1 - ~/.nvm/versions/node/v14.5.0/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^6.2.9 => 6.2.9 
    @storybook/addon-knobs: ^6.2.9 => 6.2.9 
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7 
    @storybook/react: ^6.2.9 => 6.2.9 

Additional Context

I'm pretty sure this is NOT #14631

I've tried disabling add-on docs, which gets me just a little bit farther (i.e., it won't die immediately). However, as soon as I go to Controls, it will crash.

[shilman]

Do you have a repro repo you can share?

[jayliu50]

@shilman I've put a repo here: https://github.com/jayliu50/storybook-issue-report/tree/main

Thank you so much! 🙏🏽

[artaommahe]

@shilman (in case if you missed) another repro here #14197 (comment). Tried updating to 6.2.9 - doesn't help

[jayliu50]

I don't know if this helps track in down, but I tried downgrading the repro repo to 6.1.20. Same error, but in this location:

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.33 containing PR #14976 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[SuperAL]

Turn off the Loom extension made the error log go away on my end, hope this helps other people with the same situation.