question-mark
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.

No suitable component definition found for container component

See original GitHub issue
type Props = {
    children: React.Element,
    renderStatus?: () => React.Element
};
function Test(props: Props, context) {
    if (context.show) {
        return props.renderStatus ? props.renderStatus() : null;
    }
    return props.children;
}

Test.contextTypes = {
    show: PropTypes.bool
};
export default React.memo(Test)

output

 Error: No suitable component definition found.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
danezcommented, Apr 13, 2019

There are two problems in this example:

  1. React.memo() was not supported, will be fixed in #343
  2. The component does not return jsx as felix mentioned and is therefore not detected as component.

I think adding support for @react is a good last resort. I will try to add propTypes, defaultProps and contextTypes to the detection first.

2reactions
greypantscommented, May 30, 2019

Similar issue when returning a portal.

Simplified example:

const Dialog = (props) => {
  return ReactDOM.createPortal(<MyDialogHere {...props}/>, document.body);
}


Dialog.propTypes = {
  /** If only these docs could be detected... */
  children: PropTypes.node
}

The fragment workaround does work, but +1 for allowing the presence of propTypes to trigger detection like @danez mentioned.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting DSM Storybook error "No suitable ...
When trying to publish a Storybook story to DSM, you may encounter the following error: No suitable component definition found.
Read more >
How to use the react-docgen.resolver function in react ... - Snyk
Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately. Enable here ... 'No suitable...
Read more >
'Container' is not defined react/jsx-no-undef - Stack Overflow
You need to define Container first for example: import React from 'react' import styled from "styled-components"; const Container = styled.
Read more >
Component Container definition files | Granitic reference
A component name must be unique within your application. Names must also follow the rules for Go variable name with one exception -...
Read more >
Components Basics - Vue.js
When not using a build step, a Vue component can be defined as a plain ... In SFCs, it's recommended to use PascalCase...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found