Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[azz0r]

npm run start on this project results in a page showing this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Console output:

  - ReactMultiChild.js:196 ReactDOMComponent.ReactMultiChild.Mixin.mountChildren    [wwe-draft]/[react]/lib/ReactMultiChild.js:196:27

  - ReactDOMComponent.js:593 ReactDOMComponent.Mixin._createContentMarkup
    [wwe-draft]/[react]/lib/ReactDOMComponent.js:593:32


  Error: Invariant Violation: Element type is invalid: expected a string (for bu  ilt-in components) or a class/function (for composite components) but got: und  efined.

  - invariant.js:38 invariant
    [wwe-draft]/[react]/[fbjs]/lib/invariant.js:38:15

  - instantiateReactComponent.js:66 instantiateReactComponent
    [wwe-draft]/[react]/lib/instantiateReactComponent.js:66:134

  - ReactChildReconciler.js:29 instantiateChild
    [wwe-draft]/[react]/lib/ReactChildReconciler.js:29:28

  - traverseAllChildren.js:67 traverseAllChildrenImpl
    [wwe-draft]/[react]/lib/traverseAllChildren.js:67:5

  - traverseAllChildren.js:83 traverseAllChildrenImpl
    [wwe-draft]/[react]/lib/traverseAllChildren.js:83:23

  - traverseAllChildren.js:155 traverseAllChildren
    [wwe-draft]/[react]/lib/traverseAllChildren.js:155:10

  - ReactChildReconciler.js:52 Object.ReactChildReconciler.instantiateChildren
    [wwe-draft]/[react]/lib/ReactChildReconciler.js:52:5

  - ReactMultiChild.js:159 ReactDOMComponent.ReactMultiChild.Mixin._reconcilerIn    stantiateChildren
    [wwe-draft]/[react]/lib/ReactMultiChild.js:159:41

  - ReactMultiChild.js:196 ReactDOMComponent.ReactMultiChild.Mixin.mountChildren    [wwe-draft]/[react]/lib/ReactMultiChild.js:196:27

  - ReactDOMComponent.js:593 ReactDOMComponent.Mixin._createContentMarkup
    [wwe-draft]/[react]/lib/ReactDOMComponent.js:593:32

Getting the same error implementing it into my own project.

[azz0r]

Code in a different project resulting in the same error

import React from 'react';
import ReactDOM from 'react-dom';

export class App extends React.Component {

  componentDidMount() {
    const dragula = require('react-dragula');
    const container = ReactDOM.findDOMNode(this.refs.container);
    dragula([container]);
  }

  render() {
    return (
      <div className="container">
        <div>Swap me around</div>
        <div>Swap her around</div>
        <div>Swap him around</div>
        <div>Swap them around</div>
        <div>Swap us around</div>
        <div>Swap things around</div>
        <div>Swap everything around</div>
      </div>
    );
  }

}

[paddotk]

The following works for me:

import dragula from 'react-dragula';

export class App extends React.Component {
	dragContainerRef;

	componentDidMount() {
		const container = this.dragContainerRef;
		const dragHandler = dragula([container]);
	}
	...
	<div className="container" ref={(e) => this.dragContainerRef = e}>
	...
}

Not sure if the way of setting/reading the ref has anything to do with it, otherwise it might be the method of importing the lib.