title: react-beautiful-dnd / TypeScript - JSX element type 'DragDropContext' is not a constructor function for JSX elements
body: <p>I am using TypeScript with the react-beautiful-dnd library (and React of course) but I can't seem to get past this error:</p>
  
  <blockquote>
    <p>[ts] JSX element type 'DragDropContext' is not a constructor function
    for JSX elements.   Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element; }'.
          Type 'ReactNode' is not assignable to type 'false | Element'.
            Type 'string' is not assignable to type 'false | Element'.</p>
  </blockquote>
  
  <p>I've looked at and copied several examples to try and figure out why this error is turning up and I'm coming up blank.</p>
  
  <p>Here is my code, most of it is copied directly from the documentation as a test:</p>
  
  <pre><code>import * as React from 'react';
  import {Component} from 'react';
  
  import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
  
  
  interface Item {
      id: string,
      content: string,
    }
  
  
  interface TodoListProps extends React.Props&lt;TodoList&gt; {
  
  }
  
  interface TodoListState {
      items: Item[]
  }
  
  const getItemStyle = (draggableStyle:any, isDragging: boolean): Object =&gt; ({
      // some basic styles to make the items look a bit nicer
      userSelect: 'none',
      padding: 8 * 2,
  
      // change background colour if dragging
      background: isDragging ? 'lightgreen' : 'grey',
  
      // styles we need to apply on draggables
      ...draggableStyle,
  
      margin: draggableStyle &amp;&amp; draggableStyle.margin ? draggableStyle.margin : `0 0 ${8}px 0`,
    });
  
    const getListStyle = (isDraggingOver:boolean) =&gt; ({
      background: isDraggingOver ? 'lightblue' : 'lightgrey',
      padding: 8,
      width: 250
    });
  
  
  // a little function to help us with reordering the result
  const reorder = (list:any[], startIndex:number, endIndex:number) =&gt; {
      const result = Array.from(list);
      const [removed] = result.splice(startIndex, 1);
      result.splice(endIndex, 0, removed);
  
      return result;
    };
  
  
  export default class TodoList extends React.Component&lt;{},TodoListState&gt;{
  
      private constructor(props:any){
          super(props);
  
          this.state = {
              items: [
                  {id: "0", content: 'Hello'}
              ]
          }
  
      }
  
      componentDidMount(){
  
  
      }
  
      onDragEnd = (result: any) =&gt; {
          // dropped outside the list
          if (!result.destination) {
            return;
          }
  
          const items = reorder(
            this.state.items,
            result.source.index,
            result.destination.index
          );
  
          this.setState({
            items
          });
      }
  
  
      render() {
          return (
            &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
              &lt;Droppable droppableId='droppable'&gt;
                {(dropProvided, snapshot) =&gt; (
                  &lt;div
                    ref={dropProvided.innerRef}
                    style={getListStyle(snapshot.isDraggingOver)}
                  &gt;
                    {this.state.items.map(item =&gt; (
                      &lt;Draggable key={item.id} draggableId={item.id}&gt;
                        {(provided, snapshot) =&gt; (
                          &lt;div&gt;
                            &lt;div
                              ref={provided.innerRef}
                              style={getItemStyle(
                                provided.draggableStyle,
                                snapshot.isDragging
                              )}
                              {...provided.dragHandleProps}
                            &gt;
                              {item.content}
                            &lt;/div&gt;
                            {provided.placeholder}
                          &lt;/div&gt;
                        )}
                      &lt;/Draggable&gt;
                    ))}
                  &lt;/div&gt;
                )}
              &lt;/Droppable&gt;
            &lt;/DragDropContext&gt;
          );
      }
  }
  </code></pre>
  
  <p>If I can't get past the error is there a way I can just tell TypeScript to ignore certain jsx errors?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I fixed the issue by deleting my lock file, my node_modules folder, and all my dependencies from my package.json. I reinstalled everything from scratch using npm again and it started working. Must have been a version mismatch somewhere.</p>
  
  <p>Thank you to everyone that took the time to look and comment!</p>