Cannot use namespace 'DraggableData' as a type.

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

Cannot use namespace 'DraggableData' as a type.
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; offset: IPosition; selected: ISelectedOrHovered | undefined; hovered: ISelectedOrHovered | undefined; selectedLink: ILink | undefined; hoveredLink: ILink | undefined; isSelected: boolean; NodeInner: React.FunctionComponent; Ports: React.FunctionComponent; Port: React.FunctionComponent; 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({ 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 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(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); }} />

  <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} /> ); };

Using Typescript..

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

MrBlenny / react-flow-chart

Cannot use namespace 'DraggableData' as a type. #172