-1

I am trying to install this library in visual studio and my react version is 15.0.35. Can I use this library fro this version of react? If not, is there any other library that is compatible with this version?

import * as React from 'react';
import { RouteComponentProps, NavLink } from 'react-router-dom';
import { DragEvent } from 'react';
import { ApplicationState } from '../store';
import * as NavMenuStore from '../store/NavMenu';
import { connect } from 'react-redux';
import D4AMenuItem from './D4AMenuItem';
import { State } from 'react-burger-menu';
import CardContainer from './CardContainer';
import {
ConnectDragSource,
DragDropContext,
DragSourceSpec,
DragSource,
DragSourceCollector,
DragSourceConnector,
DragSourceMonitor,
DragElementWrapper,
ConnectDropTarget,
DropTargetConnector,
DropTargetMonitor,
DropTargetSpec
} from 'react-dnd';

 //render method

 public render() {

    let dropped = this.props.SelectedMenuItems.map((menu: any) => {
        return (
            <span 
                key={Math.random()}
                draggable={true}
                onDragStart={(e: DragEvent<any>) => this.onDragStart(e, menu.MenuText)}>
                <NavLink to={menu.RoutePath} activeClassName='active' className='D4AMenuItemNew'>
                    <img className='D4AIconNew' alt='Audit4Action_Icon' src={String(menu.IconPath)}></img>
                    <span className='D4ATextNew'>
                    </span> {menu.MenuText}

                </NavLink>

           </span>    
        );
    })
    return <div >

        <div className='dropping_div' onDragOver={(e: any) => this.onDragOver(e)} onDrop={(e: DragEvent<any>) => this.onDrop(e)}>{dropped}</div>               

        <div><h1>Drag and Drop Containers Over Each Other to Swap Places</h1>
            <CardContainer /> { /*swap={() => this.swap()} drag={(e: DragEvent<any>) => this.drag(e)} cards={this.state.info}*/} </div>

    </div>;
}

}

export default connect( (state: ApplicationState) => state.navmenu, // Selects which state properties are merged into the component's props NavMenuStore.actionCreators // Selects which action creators are merged into the component's props )(Home as any);

Devashree
  • 201
  • 2
  • 4
  • 1
    You may have something wrong with your import statement. If you provide a code sample, we may be able to spot it. – Matt McCutchen Aug 01 '18 at 19:09
  • I have updated the code to show my import statements – Devashree Aug 02 '18 at 13:22
  • On what code are you getting the error "Namespace 'React' has no exported member 'ConsumerProps', ProviderProps"? I don't see these things referenced at all in the code you've posted. – Matt McCutchen Aug 02 '18 at 13:33
  • I get that error when I import from 'react-dnd'. If I comment out that statement, my code works fine. But I need react dnd for the drag and drop functionality and I am unable to use it right now, because of this problem – Devashree Aug 02 '18 at 17:35
  • I still can't reproduce the problem or figure out what is referencing ConsumerProps and ProviderProps. Is there a filename associated with the error message? Can you share your whole package.json and package-lock.json files (e.g., via GitHub Gist)? – Matt McCutchen Aug 02 '18 at 18:01
  • Yes, there is a filename. It associates the 'DragDropContext.d.ts' file located at node_modules/lib/react-dnd folder of the project with this error. – Devashree Aug 02 '18 at 18:46

1 Answers1

0

The only way I can explain that error is if you're trying to use react-dnd 4 or newer with React 15, but react-dnd 4 states that it requires React 16.3 or newer. You should have seen a warning like this when running npm install:

npm WARN react-dnd@4.0.0 requires a peer of react@>= 16.3 but none is installed. You must install peer dependencies yourself.

I expect you may run into incompatibilities at runtime as well as the problem with type checking. Try react-dnd version 3.0.2 instead.

Matt McCutchen
  • 28,856
  • 2
  • 68
  • 75