Cannot use namespace 'DraggableData' as a type.

[ToughDude]

I'm trying to run react-flow-chart without story book.

I created a typescript app using create-react-app my-app --template typescript and then installed packages as mentioned in react-flow-chart library, and then got into this issue :-

I am getting these issues, no idea why..

1. Cannot use namespace 'DraggableData' as a type.
2. JSX element type 'Draggable' does not have any construct or call signatures.

package.json..

{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/lodash": "^4.14.157", "@types/node": "^12.12.47", "@types/pathfinding": "0.0.4", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/styled-components": "^5.1.0", "@types/uuid": "^8.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-draggable": "^4.4.3", "react-resize-observer": "^1.1.1", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "ts-loader": "^7.0.5", "typescript": "^3.7.5" } }

tsconfig.json..

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": ["src"] }

source code ..

import * as React from "react"; import * as ReactDOM from "react-dom"; import * as Draggable from "react-draggable"; import * as DraggableData from "react-draggable"; import ResizeObserver from "react-resize-observer"; import { IConfig, ILink, INode, INodeInnerDefaultProps, IOnDragNode, IOnDragNodeStop, IOnLinkCancel, IOnLinkComplete, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick, IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange, IOnPortPositionChange, IPortDefaultProps, IPortsDefaultProps, IPosition, ISelectedOrHovered, ISize, PortWrapper, } from "../../"; import { noop } from "../../utils"; import { INodeDefaultProps, NodeDefault } from "./Node.default";

export interface INodeWrapperProps { config: IConfig; node: INode; Component: React.FunctionComponent<INodeDefaultProps>; offset: IPosition; selected: ISelectedOrHovered | undefined; hovered: ISelectedOrHovered | undefined; selectedLink: ILink | undefined; hoveredLink: ILink | undefined; isSelected: boolean; NodeInner: React.FunctionComponent<INodeInnerDefaultProps>; Ports: React.FunctionComponent<IPortsDefaultProps>; Port: React.FunctionComponent<IPortDefaultProps>; onPortPositionChange: IOnPortPositionChange; onLinkStart: IOnLinkStart; onLinkMove: IOnLinkMove; onLinkComplete: IOnLinkComplete; onLinkCancel: IOnLinkCancel; onDragNode: IOnDragNode; onDragNodeStop: IOnDragNodeStop; onNodeClick: IOnNodeClick; onNodeDoubleClick: IOnNodeDoubleClick; onNodeSizeChange: IOnNodeSizeChange; onNodeMouseEnter: IOnNodeMouseEnter; onNodeMouseLeave: IOnNodeMouseLeave; }

export const NodeWrapper = ({ config, node, onDragNode, onDragNodeStop, onNodeClick, onNodeDoubleClick, isSelected, Component = NodeDefault, onNodeSizeChange, onNodeMouseEnter, onNodeMouseLeave, NodeInner, Ports, Port, offset, selected, selectedLink, hovered, hoveredLink, onPortPositionChange, onLinkStart, onLinkMove, onLinkComplete, onLinkCancel, }: INodeWrapperProps) => { const [size, setSize] = React.useState<ISize>({ width: 0, height: 0 });

const isDragging = React.useRef(false);

const onStart = React.useCallback((e: MouseEvent) => { // Stop propagation so the canvas does not move e.stopPropagation(); isDragging.current = false; }, []);

const onDrag = React.useCallback( (event: MouseEvent, data: DraggableData) => { isDragging.current = true; onDragNode({ config, event, data, id: node.id }); }, [onDragNode, config, node.id] );

const onStop = React.useCallback( (event: MouseEvent, data: DraggableData) => { onDragNodeStop({ config, event, data, id: node.id }); }, [onDragNodeStop, config, node.id] );

const onClick = React.useCallback( (e: React.MouseEvent) => { if (!config.readonly) { e.stopPropagation(); if (!isDragging.current) { onNodeClick({ config, nodeId: node.id }); } } }, [config, node.id] );

const onDoubleClick = React.useCallback( (e: React.MouseEvent) => { if (!config.readonly) { e.stopPropagation(); if (!isDragging.current) { onNodeDoubleClick({ config, nodeId: node.id }); } } }, [config, node.id] );

const onMouseEnter = React.useCallback(() => { onNodeMouseEnter({ config, nodeId: node.id }); }, [config, node.id]);

const onMouseLeave = React.useCallback(() => { onNodeMouseLeave({ config, nodeId: node.id }); }, [config, node.id]);

const compRef = React.useRef<HTMLElement>(null);

// TODO: probably should add an observer to track node component size changes React.useLayoutEffect(() => { const el = ReactDOM.findDOMNode(compRef.current) as HTMLInputElement; if (el) { if ( (node.size && node.size.width) !== el.offsetWidth || (node.size && node.size.height) !== el.offsetHeight ) { const newSize = { width: el.offsetWidth, height: el.offsetHeight }; setSize(newSize); onNodeSizeChange({ config, nodeId: node.id, size: newSize }); } } }, [node, compRef.current, size.width, size.height]);

const children = ( <> <ResizeObserver onResize={(rect) => { const newSize = { width: rect.width, height: rect.height }; setSize(newSize); }} /> <NodeInner node={node} config={config} /> <Ports node={node} config={config}> {Object.keys(node.ports).map((portId) => ( <PortWrapper config={config} key={portId} offset={offset} selected={selected} selectedLink={selectedLink} hoveredLink={hoveredLink} hovered={hovered} node={node} port={node.ports[portId]} Component={Port} onPortPositionChange={onPortPositionChange} onLinkStart={config.readonly ? noop : onLinkStart} onLinkMove={config.readonly ? noop : onLinkMove} onLinkComplete={onLinkComplete} onLinkCancel={onLinkCancel} /> ))} </Ports> </> );

return ( <Draggable bounds="parent" axis="both" position={node.position} grid={[1, 1]} onStart={onStart} onDrag={onDrag} onStop={onStop} disabled={config.readonly} > <Component config={config} ref={compRef} children={children} onClick={onClick} onDoubleClick={onDoubleClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} isSelected={isSelected} node={node} /> </Draggable> ); };

Using Typescript..

This is an urgent issue for an ongoing project. Any help asap would be highly appreciated.