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 warning but my component is not even rendered #431

Closed
HriBB opened this issue Sep 7, 2016 · 2 comments
Closed

Failed prop type warning but my component is not even rendered #431

HriBB opened this issue Sep 7, 2016 · 2 comments

Comments

@HriBB
Copy link

HriBB commented Sep 7, 2016

Hey there. First of all great work on storybook. I've been using it for a couple of weeks now, and it's a great tool. Thanks!

I'm using @kadira/storybook@2.11.0 and I'm getting this weird PropType error on initial load, even though my component children are not even rendered yet. After that, everything works as expected. Anyway, it's not a problem at all, just wanted to report it. Could be an error on my side ...

I'm using a "portal" technique to similar to react-portal to open a menu in the body. Here's my simplified code

import React from 'react'
import { storiesOf, action } from '@kadira/storybook'

import Button from 'components/ux/Button'
import Menu, { MenuItem } from 'components/ux/Menu'

storiesOf('Menu', module)
  .add('default', () => (
    <Menu target={<Button style={{margin:'20px'}}>Open menu</Button>}>
      <MenuItem>One</MenuItem>
      <MenuItem>Two</MenuItem>
      <MenuItem>Three</MenuItem>
    </Menu>
  ))

The render function of Menu only renders Button and only after user clicks on that button, the menu is rendered inside portal node which is appended to body.

render() {
    return cloneElement(this.props.target, {
      onMouseUp: this.onTargetMouseUp
    })
  }

This is my storybook webpack.config.js

const path = require('path');

module.exports = {
  devtool: 'eval',
  module: {
    loaders: [{
      test: /\.(scss|css)$/,
      loader: 'style!css?sourceMap!resolve-url?sourceMap!sass?sourceMap!postcss',
    },{
      test: /\.(png|jpg|svg|woff|woff2|eot|ttf)$/,
      loader: 'url-loader?limit=100000',
    }]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, '..', 'client', 'styles')],
  },
  postcss: function() {
    return [
      require('autoprefixer'),
    ]
  },
}

And this is the error I get

VM28411:36 Warning: Failed prop type: Required prop `tabIndex` was not specified in `MenuItem`.
  in MenuItem
  printWarning           @ VM28411:36
  warning                @ VM28411:60
  checkReactTypeSpec     @ VM28429:81
  validatePropTypes      @ VM28427:153
  createElement          @ VM28427:189
  (anonymous function)   @ ?d41d:82
  renderMain             @ render.js?714e:84
  renderPreview          @ render.js?714e:99
  renderUI               @ index.js?0342:89
  dispatch               @ VM29080:186
  _renderMain            @ config_api.js?9a1b:45
  render                 @ config_api.js?9a1b:64
  configure              @ config_api.js?9a1b:80
  (anonymous function)   @ ?d41d:10
  (anonymous function)   @ ?d41d:6
  (anonymous function)   @ preview.bundle.js:4824
  __webpack_require__    @ preview.bundle.js:556
  fn                     @ preview.bundle.js:87
  (anonymous function)   @ preview.bundle.js:590
  __webpack_require__    @ preview.bundle.js:556
  (anonymous function)   @ preview.bundle.js:579
  (anonymous function)   @ preview.bundle.js:582
client.js?3ac5:58[HMR] connected
@HriBB
Copy link
Author

HriBB commented Sep 7, 2016

Basically all required props on MenuItem give me a warning on initial load. Will try to debug is somehow, although I'm not sure where to start ...

@HriBB
Copy link
Author

HriBB commented Sep 7, 2016

Ahh ... this is a problem on my side, nevermind :)

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

No branches or pull requests

1 participant