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.

propTypes are not created if you assign props from a pre-defined type or if you import types from another file

See original GitHub issue

For example the following won’t work:

const Link = ({ href, children }: Props) =>
   <a href={href}>children</a>

type Props = {
   href: string,
   children: any,

whereas this will:

const Link = ({ href, children }: {
   href: string,
   children: any,
}) =>
   <a href={href}>children</a>

In addition, if you import types, from other files, the type won’t in fact be created in the other file. There will be nothing there. That problem becomes even worse if you’re using types imported from packages, e.g. the react-redux flowtypes, eg if you’re doing something like the following you’re screwed:

import React from 'react'
import { connect } from 'react-redux'
import type { Store } from 'redux'
import type { Connector } from 'react-redux'

import type { Href } from './hrefToUrl' // no flow type will be converted to a propType in the other file

type OwnProps = {
  href: Href, 
  children: any, 

type Props = {
  dispatch: Function,
} & OwnProps // doubt an intersection will work

type Context = {
  store: Store,

const Link = ({ href, children }: Props) => // Props wont work cuz its not defined here
   <a href={href} onPress={(e) => e.preventDefault() || dispatch({ type: 'FOO' })}>{children}</a>

const connector: Connector<OwnProps, Props> = connect() // yea right, not happening

export default connector(Link)

So in short, any serious code using redux (or any 3rd party types, or any of your own imported files) unfortunately won’t work with this otherwise great package.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

brigandcommented, Apr 2, 2017

@max-mykhailenko supporting flow-typed would be a ton of extra code and require filesystem access, which isn’t good in a babel plugin.

If you implement it in a fork, I’ll put a link in the readme, but I don’t want to maintain that feature.

faceyspaceycommented, Jul 17, 2017

By the way, this issue still occurs if you don’t put the flow types before they are used. Typically with Flow it doesn’t matter what order the types come in (they are hoisted), but with the babel plugin, they have to be defined before used.

Not the biggest issue, but worth mentioning. The previous fix for intersections fixed the larger problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typechecking With PropTypes - React
To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......
Read more >
How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >
reactjs - How to import a React proptypes typed component as ...
As a POC I can import a .JSX component with proptypes into a .TSX component without adding typing such as :any . I...
Read more >
[@types/prop-types] PropTypes.shape throws errors when ...
I tried using the @types/prop-types package and had problems. ... Type 'string | null | undefined' is not assignable to type 'string ...
Read more >
How to Use PropTypes in React - freeCodeCamp
We can use PropTypes to validate any data we are receiving from props. But before using it we will have to import it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found