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

[kierson]

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.

[haingdc]

Just a temporary way use Typescript ^2.6

// at node_modules\react-split-pane\index.d.ts :53:1
// @ts-ignore
export = SplitPane;

// @ts-ignore
import * as SplitPane from "react-split-pane";

[kierson]

I decided to go for pull request that fixes this issue: https://github.com/tomkp/react-split-pane/pull/253

[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,.

[kierson]

Hi @WernerLDev . It works for me. I use the latest version of react-split-pane which is 0.1.77. How do you import this component in your .tsx file?

[jackroberts-gh]

Same issue as @WernerLDev - when running tests, my test creates a shallow component which uses SplitPane. I get the following warning:

Warning: React.createElement: 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.

[micnil]

I changed the index.js file from:

var SplitPane = require('./lib/SplitPane');

module.exports = SplitPane;

to:

var SplitPane = require('./lib/SplitPane');

exports.default = SplitPane;

and now it works to import like this:

import SplitPane from "react-split-pane";

[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.