Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@storybook/addon-info@4.1.4 Error on PropTypes.oneOfType when argument is a var

See original GitHub issue

Describe the bug Addon-info throws an exception (when a story is rendered) if a mounted component defines a PropTypes.oneOfType as a variable rather than an array literal.

To Reproduce Steps to reproduce the behavior:

Import the Test.jsx component into a story and render
run storybook
Load created story

Expected behavior The component renders without error

Actual behavior

Story does not render
Exception message displayed:

propTypes.map is not a function
    TypeError: propTypes.map is not a function
    at OneOfType (OneOfType.js:27)
    at mountIndeterminateComponent (react-dom.development.js:14811)
    at beginWork (react-dom.development.js:15316)
    at performUnitOfWork (react-dom.development.js:18150)
    at workLoop (react-dom.development.js:18190)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:17437)

The exception occurs at: https://github.com/storybooks/storybook/blob/4c757d05f162925217751bb5d61518c108d0935b/addons/info/src/components/types/OneOfType.js#L10-L11 where propTypes is expected to be an iterable (either an array of propType, or an object of name “custom”). In this case the value is the string name of the variable passed to PropTypes.oneOfType in the Component - in this case “b”.

Code snippets Test.jsx

import React from 'react';
import PropTypes from 'prop-types';


const Test = ({ a, b }) => <div> {a} {b} </div>;

const allowedChildTypes = [
  PropTypes.number,
  PropTypes.string,
  PropTypes.element,
];

Test.propTypes = {
  // works ok
  a: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.element,
  ]),
  // fails with: TypeError: propTypes.map is not a function
  b: PropTypes.oneOfType(allowedChildTypes),
};

export default Test;

System:

OS: MacOS
Device: Macbook Pro 2018
Browser: chrome
Framework: react@16.7.0
Version: [e.g. 4.1.4]

Additional context It is valid and desirable to use variables as arguments to oneOfType. Its likely that the problem is with react-dom passing the propTypes as a string. However the plugin should guard against the exception and at a minimum report the propType as “custom” or “unknown”.