Popper.js React Wrapper - React.createElement: type is invalid

Question

I am trying to implement the standalone example from here, using react-popper - I basically just copy pasted the code for now. It does render the component. However, when I click everything breaks. I am using it in Gatsby.js - if that should make a difference?

That's the error(s) I'm getting:

index.js:2177 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at StandaloneExample.js:36.

And:

Uncaught TypeError: Object(...)(...) is not a function at InnerPopper.render (Popper.js:159)

And:

The above error occurred in the component: in InnerPopper (created by Context.Consumer) in Popper (at StandaloneExample.js:34)

And multiple of these:

TypeError: Object(...)(...) is not a function

Here's my code:

import React, { PureComponent } from 'react'
import { Popper, Arrow } from 'react-popper'
import './popper.css'

class StandaloneExample extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    }
  }


  handleClick = (e) => {
    console.log(e);
    this.setState({
      isOpen: !this.state.isOpen,
    })
  }

  render() {
    return (
      <div>
        <h2>Standalone Popper Example</h2>
        <div
          ref={div => (this.target = div)}
          style={{ width: 120, height: 120, background: '#b4da55' }}
          onClick={this.handleClick}
        >
          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
        </div>
        {this.state.isOpen && (
          <Popper className="popper" target={this.target}>
            Popper Content for Standalone example
            <Arrow className="popper__arrow" />
          </Popper>
        )}
      </div>
    )
  }
}

export default StandaloneExample

I've modified things a bit (the way I implement state etc.), because I thought this might fix the errors I'm getting, but it didn't. Apart from that the code is pretty much the same as in the sandbox example - I'm not sure where it breaks.

edit: I am importing things like so:

import StandaloneExample from './MenuDropdown/StandaloneExample.js'

and am using it in my render function like so:

<StandaloneExample />

Answer 1

The example you linked is for [email protected].

Please check that you aren't with version 1 or greater.

react-popper V1 had breaking changes from V0.

You can find V1 doc here and V0 doc here.