search

tomkp / react-split-pane

React split-pane component
https://tomkp.github.io/react-split-pane
MIT License
3.23k stars 408 forks source link

Unable to Import Pane #606

Open adarshaacharya opened 4 years ago

adarshaacharya commented 4 years ago

Describe the bug

Whenever I tried to import { Pane} from 'react-split-pane' I got following error.

Module '"../node_modules/react-split-pane"' has no exported member 'Pane'. Did you mean to use 'import Pane from "../node_modules/react-split-pane"' instead?ts(2614)

Is Pane component deprecated ?

I'm using "react-split-pane": "^2.0.3" and "typescript": "~3.7.2"

enomado commented 4 years ago

Yep. There is no Pane in lib/index.js exported.

ajmalwashere commented 4 years ago

Import it from "react-split-pane/lib/Pane"

kayesn786 commented 4 years ago

Hi @mohamedajmaltm @enomado @adarshaacharya , are you guys getting any warning after using 2.0.3?

am getting the following warnings warning

is there any workaround for this, or shall i use the 0.. version of it?

Thanks in advance.

jiyarong commented 4 years ago

Same error here, there is no type with 'Pane'

adarshaacharya commented 4 years ago

Hi @mohamedajmaltm @enomado @adarshaacharya , are you guys getting any warning after using 2.0.3?

am getting the following warnings warning

is there any workaround for this, or shall i use the 0.. version of it?

Thanks in advance.

I think there is no other option than downgrading the version to v0.x.

adarshaacharya commented 4 years ago

Many people may be confused because the docs still show that new version is available. I think author should remove that part.

Mustang-Galaxy commented 2 years ago

you can use react-split-pane-next

truongnq2k commented 1 month ago

first declare type.d.ts

declare module "react-split-pane/lib/Pane" {
  import * as React from "react";

  export interface PaneProps {
    initialSize?: string | number;
    minSize?: string | number;
    maxSize?: string | number;
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
  }

  const Pane: React.FC<PaneProps>;
  export default Pane;
}

Then use code behind

import SplitPane from "react-split-pane";
import Pain from "react-split-pane/lib/Pane";

{/* @ts-ignore */}
              <SplitPane split="vertical" minSize={300} maxSize={1200}>
                <Pain initialSize="70%" minSize="40%" maxSize="80%">
 content 1
                </Pain>
                <Pain initialSize="30%" minSize="20%" maxSize="60%">
                  content 2
                </Pain>
              </SplitPane>