search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.09k stars 9.25k forks source link

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

Closed kon-rad closed 4 years ago

kon-rad commented 5 years ago

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:

  1. visit storybook homepage on localhost
  2. warning appears in console.log

Expected behavior No warnings should appear in console.

Screenshots N/A

Code snippets N/A

System:

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"
  }
}
feonit commented 5 years ago

same in 5.1.0-rc.0

stale[bot] commented 5 years ago

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!

rasmusroy commented 5 years ago

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",
shilman commented 5 years ago

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

stale[bot] commented 5 years ago

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!

Goddak commented 4 years ago

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?

stale[bot] commented 4 years ago

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!

ileahu-ellation commented 4 years ago

same in 5.2.5

shilman commented 4 years ago

PRs welcome

hobroker commented 4 years ago

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

shilman commented 4 years ago

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 commented 4 years ago

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!