Problem with using with TypeScript (react-split-pane version: 0.1.76)

my-app/node_modules/react-split-pane/index.d.ts
(53,1): An export assignment cannot be used in a module with other exported elements.

First, I’ve got this error on my existing app, which is quite big so I wanted to reproduce it in fresh app. I created completely new typescript project using create-react-app my-app --scripts-version=react-scripts-ts and then just import react-split-pane:

import SplitPane from 'react-split-pane';

Compiler error points to the 53 line of index.d.ts, which is:

export = SplitPane;

I also tried importing the other ways: const SplitPane = require('react-split-pane'); import {default as SplitPane} from 'react-split-pane'; import * as SplitPane from 'react-split-pane;

So I assume there is a problem on react-split-pane side.

I am using newest TypeScript version published on npm which is 2.6.2 at the moment.

[WernerLDev]

@kierson are you sure that fix is correct? Typescript compiles fine with the current type definition, but at runtime I’m facing this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports..

This is caused by react-split-pane, it looks like SplitPane is undefined or something. Not really sure how to fix this. It still worked before the type definitions where moved from DefinitlyTyped to this repo,.

[eug48]

For some reason the npm package of version 0.1.77 has these two lines at the end of lib/SplitPane.js:

exports.default = SplitPane;
module.exports = exports['default'];

There’s something wrong there as the exports object is modified and then overwritten… Commenting out the last line fixes things.