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} />;
}
}
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';