JSX element type [External Module] does not have any construct or call signatures

Question

When trying to run some simple edition of Microsoft Typescript-React starter tutorial: https://github.com/Microsoft/TypeScript-React-Starter I'm getting the following error over an imported module:

(31,30): JSX element type 'SplitPane' does not have any construct or call signatures.

I have checked online, and there are a couple of questions with my same error: What does the error "JSX element type '...' does not have any construct or call signatures" mean? & https://github.com/Microsoft/TypeScript/issues/28631 but they don't help me to understand where my error is, since I am using an external module.

To make it clearer I'll add some code. I am using the same files as are outputed when using npx create-react-app my-app --scripts-version=react-scripts-ts, and just edited package.json, and created SplittedPane.tsx.

This is the file SplittedPane.tsx:

import * as React from "react";
import * as SplitPane from "react-split-pane"

interface Props {
    numberPanes: number;
}

interface State {
    numberPanes: number;
}

class SplittedPane extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state ={
            numberPanes: props.numberPanes || 1
        };
    }

    onIncrement = () => this.updatePanes(this.state.numberPanes + 1);
    onDecrement = () => this.updatePanes(this.state.numberPanes - 1);

    render() {
        if (this.state.numberPanes === 1) {
            return (
                <div className="globalView">
                    <button onClick={this.onIncrement}>+</button>
                    <div className="panesView">                        
                            <SplitPane split="horizontal" defaultSize="50%">
                                <h1>West</h1>
                                <h1>East</h1>
                            </SplitPane>

                    </div>
                </div>
            )
        } else {
            throw new Error('The number of Panes is not supported');
        }
    }

    updatePanes(numberPanes: number) {
        this.setState({numberPanes});
    }
}

export default SplittedPane;

And this the package.json:

{
  "name": "react-typescript-github-microsoft-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts-ts": "3.1.0",
    "styled-components":"^4.2.0",
    "react-split-pane":"^0.1.87"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.7",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "typescript": "^3.4.5"
  }
}

I would expect this code to create two panes (split window), once I include this SplittedPane into the index.tsx file. However, it is crashing with the aforementioned error:

(31,30): JSX element type 'SplitPane' does not have any construct or call signatures.

Since I am using this external module, 'react-split-pane', how can I overcome this issue? The solutions I saw for similar errors seem not to be aimed toward external modules.

Thank you in advance

Sanders Sanders · Accepted Answer · 2019-04-24T13:37:16

react-split-pane uses a single named default export, which should be imported like

import SplitPane from "react-split-pane"

JSX element type [External Module] does not have any construct or call signatures

1 Answers