Super expression must either be null or a function? - reactjs

Question

The component must be part of the actions column and be rendered for the "workflow" type
The component should be able to render only a button, which when clicked starts the workflow configured in the action, OR a dropdown with different options which when clicked start the workflow with the clicked option as the workflow arguments
The component should use the connectWorkflow decorator, which adds different props for interacting with the workflows API, e.g. startFlow, resumeFlow. The functions and their arguments can be seen in the WorkflowManager class
When the user clicks the button or an option the component should call the startFlow function from the props, with the workflowPath configured in the action
The component should be able to pass input data to the workflow, that is retrieved from the specific table row data. It should be able to accept an option in the action definition in the ListPage columns prop, that is an Object which will be passed as the input data to the startFlow function. Before being passed any key or value from this object should be checked if there are some values in them that should be replaced with the table row's data
type Props = {
workflowPath: string;
executionId: string,
data: Object,
actionHandlers: {
[string]: {
async: boolean,
func: (data: { executionId: string, [string]: any }, context: Object) => any,
},
},
startFlow: Function,
resumeFlow: Function,
};
type State = {
workflowCode: string,
executionId: string,
loading: boolean,
}
#connectWorkflow
class Workflow extends React.Component<Props, State> {
static defaultProps = {
executionId: '',
data: {},
actionHandlers: {},
startFlow: () => undefined,
resumeFlow: () => undefined,
};
state = {
workflowCode: '',
executionId: '',
loading: true,
};
componentDidMount() {
const {
workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
} = this.props;
if (executionId) {
resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
this.setState({ executionId: execId, workflowCode, loading: false });
});
} else {
startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
this.setState({ executionId: execId, workflowCode, loading: false });
});
}
}
componentDidUpdate(prevProps: Props) {
const {
workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
} = this.props;
if (prevProps.workflowPath !== workflowPath) {
if (executionId) {
resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
this.setState({ executionId: execId, workflowCode, loading: false });
});
} else {
startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
this.setState({ executionId: execId, workflowCode, loading: false });
});
}
}
}
render() {
const { executionId: executionIdProps } = this.props;
const { executionId, loading, workflowCode } = this.state;
// TODO: i18n
return (
<React.Fragment>
<WorkflowForm
workflowCode={workflowCode}
executionId={executionIdProps || executionId}
/>
{loading && (
<Layer margin="medium" plain>
<Box>
<Text>Loading</Text>
</Box>
</Layer>
)}
</React.Fragment>
);
}
}
export default Workflow;
Then I have error here: Super expression must either be null or a function
// #flow
import * as React from 'react';
import { Box, Button } from 'grommet';
import { Launch } from 'grommet-icons';
import connectWorkflow from '../../../../../../../../src/components/workflows/connectWorkflow';
type Props = {
startFlow: Function,
}
#connectWorkflow
class WorkflowComponent extends React.ComponentType<Props> {
static defaultProps = {
startFlow: () => {
},
};
handleStart = () => {
this.props.startFlow();
};
render() {
return (
<Box>
<Button
label="Star Flow"
position="right"
icon={<Launch />}
onClick={this.handleStart}
/>
</Box>
);
}
}
export default WorkflowComponent;

Answer 1

The error means that parent class is not valid class but something else.
React.ComponentType is a type, not a class. It doesn't exist at run time, another class cannot extend it. WorkflowComponent should extend React.Component. With types it likely should be:
class WorkflowComponent extends React.Component<Props> {...}