Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kon-rad opened this issue Jun 25, 2019 · 12 comments

Comments

@kon-rad
Copy link

kon-rad commented Jun 25, 2019

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:

  • 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"
  }
}
@feonit
Copy link

feonit commented Jul 12, 2019

same in 5.1.0-rc.0

@stale
Copy link

stale bot commented Aug 2, 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 stale bot added the inactive label Aug 2, 2019
@rasmusroy
Copy link

rasmusroy commented Aug 6, 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",

@stale stale bot removed the inactive label Aug 6, 2019
@shilman
Copy link
Member

shilman commented Aug 26, 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

@stale
Copy link

stale bot commented Sep 16, 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 stale bot added the inactive label Sep 16, 2019
@shilman shilman modified the milestones: 5.1.x, 5.2.x Sep 23, 2019
@stale stale bot removed the inactive label Sep 23, 2019
@Goddak
Copy link

Goddak commented Oct 11, 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?

@stale
Copy link

stale bot commented Nov 1, 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 stale bot added the inactive label Nov 1, 2019
@ileahu-ellation
Copy link

same in 5.2.5

@stale stale bot removed the inactive label Nov 6, 2019
@shilman
Copy link
Member

shilman commented Nov 7, 2019

PRs welcome

@hobroker
Copy link
Contributor

hobroker commented Nov 7, 2019

@shilman
Here #8745

@shilman
Copy link
Member

shilman commented Nov 9, 2019

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 shilman closed this as completed Nov 9, 2019
@shilman
Copy link
Member

shilman commented Nov 9, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants