javascriptreactjsflowtypejavascript-inheritance

Getting React flow error: module is not a polymorphic type. How to extend a class?


I am trying to extend my existing layout to basically override the method renderHeader() but flow doesn't like it:

module ./Layout [1] is not a polymorphic type.

how do I fix this?

here is a class I am trying to extend (it's not abstract):
Layout.js

//@flow
import * as React from 'react';
import Header from '../header/Header';
import '../../css/settings/utilities.css';

export type LayoutProps = {
    children: React.Node,
};

class Layout extends React.PureComponent<LayoutProps> {
    renderHeader() {
        return <Header />;
    }
    render() {
        return (
            <React.Fragment>
                <h1 className="u-hd">My Wee Loyalty Prime</h1>
                {this.renderHeader()}
                <main className="main">{this.props.children}</main>
            </React.Fragment>
        );
    }
}

export default Layout;

here is my class which should extend: LayoutRegistration.js

//@flow
import * as React from 'react';
import Header from '../header/Header';
import * as Layout from './Layout';
import '../../css/settings/utilities.css';

export default class LayoutRegistration extends Layout {
    renderHeader() {
        return <Header showSubnav={false} />;
    }
}

Solution

  • The problem is that

    import * as Layout from './Layout';
    

    results in Layout import being module object, while it's expected to be a class.

    Since Layout component is default export, it should be:

    import Layout from './Layout';