Storybook: Failed prop type: The prop `children` is marked as required in `Td`, but its value is `undefined`.

Created on 25 Jun 2019 · 12Comments · Source: storybookjs/storybook

Describe the bug

checkPropTypes.js:20 
Warning: Failed prop type: The prop `children` is marked as required in `Td`, but its value is `null`.
    in Td (created by PropTable)
    in PropTable (created by TableComponent)
    in TableComponent (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in div (created by Story)
    in Story

Updated from storybook 4 to 5. This warning appears in the console when first loading the page. On visiting other 'stories' warning doesn't show up.

To Reproduce
Steps to reproduce the behavior:

visit storybook homepage on localhost
warning appears in console.log

Expected behavior
No warnings should appear in console.

Screenshots
N/A

Code snippets
N/A

System:

OS: MacOS
Device: Macbook Pro 2018
Browser: latest chrome
Framework: react
Addons: links & actions
Version: 5.1.8

Additional context
package.json:

{
  "name": "redacted",
  "version": "0.64.0",
  "publishConfig": {
    "registry": "redacted"
  },
  "main": "docs/index.js",
  "module": "docs/index.js",
  "private": true,
  "scripts": {
    "storybook": "start-storybook -p 9009 -s ../../public",
    "build-storybook": "build-storybook -s ../../public -o ../../storybook-static",
    "link-packages": "npm link ../core"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.5",
    "@storybook/addon-actions": "^5.1.8",
    "@storybook/addon-info": "5.1.8",
    "@storybook/addon-links": "5.1.8",
    "@storybook/addon-notes": "5.1.8",
    "@storybook/addons": "5.1.8",
    "@storybook/cli": "5.1.8",
    "@storybook/react": "5.1.8",
    "autoprefixer": "6.7.2",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "enzyme": "^2.9.1",
    "eslint": "^4.16.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-jest": "^20.0.3",
    "eslint-plugin-prettier": "^2.5.0",
    "eslint-plugin-react": "^7.5.1",
    "prettier": "^1.11.1",
    "source-map-loader": "^0.2.3"
  },
  "dependencies": {
    "redacted",
    "@storybook/node-logger": "5.1.8",
    "classnames": "^2.2.5",
    "downshift": "1.16.2",
    "fuse.js": "3.4.2",
    "prop-types": "^15.5.10",
    "react-addons-css-transition-group": "15.6.0",
    "react-dropzone-component": "^2.0.0",
    "react-input-autosize": "^2.0.1",
    "react-modal": "^3.1.10",
    "react-proptype-conditional-require": "^1.0.4",
    "react-tabs": "^1.1.0",
    "react-toastify": "^4.0.0-rc.5",
    "react-waypoint": "^7.3.1",
    "react-widgets": "^4.0.0",
    "react-widgets-moment": "^4.0.0",
    "shortid": "^2.2.8"
  },
  "peerDependencies": {
    "moment": "^2.19.2",
    "react": "^16.6.3",
    "react-dom": "^16.7.0"
  }
}

info bug good first issue help wanted

Source

kon-rad

👍13

Most helpful comment

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.42 containing PR #8745 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

shilman on 9 Nov 2019

🎉2

All 12 comments

same in 5.1.0-rc.0

feonit on 12 Jul 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 2 Aug 2019

I'm experiencing this same issue

"@storybook/addon-info": "^5.1.10",
"@storybook/react": "5.2.0-beta.7",
"react": "^16.8.6",
"react-dom": "^16.8.6",

rasmusroy on 6 Aug 2019

FYI addon-info is being superceded by addon-docs, which fixes a bunch of bugs and is easier to maintain. It’s reached release candidate (RC) status and will be properly released soon. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

shilman on 26 Aug 2019

stale[bot] on 16 Sep 2019

Having this same issue here, except I can reproduce it with a single story in my storybook, I will provide the code for it below but this is the only story in my book that will cause the error on page load (refresh).

ImageLoader.js

import React, { useState } from "react";
import { useAxiosMock } from "../../helpers";
import { storiesOf } from "@storybook/react";
import { select, text, button, number } from "@storybook/addon-knobs";
import { ImageLoader, FlexBox, PropTable } from "../";
import readme from "./ImageLoader.md";

const stories = storiesOf("Components", module);
const src = "http://localhost:9009/myImage.png";
const Story = () => {
  const [key, setKey] = useState(0);
  const options = {
    200: 200,
    404: 404
  };

  let serverResponse = select("Server response", options, 200);
  useAxiosMock(
    axiosMock => {
      axiosMock.onGet(src).reply(config => [serverResponse, "OK"]);
    },
    [serverResponse]
  );

  const bgSizeOptions = {
    cover: "cover",
    contain: "contain"
  };
  const aspectRatioOptions = {
    "16:9": "16:9",
    "4:3": "4:3",
    "1:1": "1:1"
  };
  const style = {
    width: "200px"
  };

  return (
    <FlexBox alignItems="flex-start" col>
      <FlexBox id="test" style={style}>
        <ImageLoader
          key={key}
          src={src}
          fallback={text("Fallback message", "Fallback message")}
          initialRetryDelay={1000}
          backgroundColor="light_gray4"
          border="imageBorder"
          maxRetries={number("Maximum retries", 2)}
          aspectRatio={select("Aspect ratio", aspectRatioOptions, "16:9")}
          backgroundSize={select("Background size", bgSizeOptions, "contain")}
        />
      </FlexBox>
      <br />
      {button("Rerender", () => setKey(k => k + 1))}
    </FlexBox>
  );
};

stories.add("ImageLoader", () => <Story />, {
  readme: {
    // Show readme at the addons panel
    sidebar: readme
  },
  info: {
    propTables: [ImageLoader],
    // TableComponent: PropTable
  }
});

I'll start by saying this is not my component and I am not here to review it, I merely want to fix this specific issue (TL:DR; I don't need styling suggestions).

My effort to resolve the issue so far

I have created a custom PropTable component which is a copy from addon-info but I have substituted the PropVal & PrettyPropType components for a div. You will see in my demo code I have used it (I left it there commented out) and this resolves this issue, I can browse without error at any point.

You've got a fix then mate, why are you here?

I probably wouldn't be here but I am unable to set and use the custom table at the global level (I.e. if I add info: { TableComponent: PropTable } to my addParameters call in .storybook/config.js it is not used anywhere, when adding it to stories individually it works, how can I configure this globally?

Goddak on 11 Oct 2019

👍1

stale[bot] on 1 Nov 2019

same in 5.2.5

ileahu-ellation on 6 Nov 2019

PRs welcome

shilman on 7 Nov 2019

@shilman
Here https://github.com/storybookjs/storybook/pull/8745

hobroker on 7 Nov 2019

❤1

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.42 containing PR #8745 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

shilman on 9 Nov 2019

🎉2

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.6 containing PR #8745 that references this issue. Upgrade today to try it out!

shilman on 9 Nov 2019

Was this page helpful?

0 / 5 - 0 ratings