Cannot read property 'props' of undefined

zlwaterfield commented 6 years ago

Behavior Onload page it is erroring out: Cannot read property 'props' of undefined. Looks like it might be scoping issues so I my initial thoughts were node version issues but i cant seem to fix it.

I am copying the demo identically

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    run: false,
    steps: [{
      target: '.my-first-step',
      content: 'This if my awesome feature!',
      placement: 'bottom',
    }],
  };

  componentDidMount() {
    this.setState({ run: true });
  }

  callback = (data) => {
    const { action, index, type } = data;
  };

  render () {
    const { steps, run } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          run={run}
          callback={this.callback}
        />
        <div className="my-first-step"></div>
      </div>
    );
  }
}

React version "react": "16.4.0", "react-dom": "16.4.0",

React-Joyride version "react-joyride": "1.11.4",

Browser name and version Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Other Note I am using this on nextjs (https://nextjs.org/) and i am wondering if that may be the cause. I have tried with all major Node releases from 6.4.0 to 9.4.0

gilbarbara commented 6 years ago

Hey,

It's impossible for me to know what is going on without running the code. Are you using create-react-app or a custom webpack config? You could try to clone this repo locally and link it to your app. The development bundle might give more information.

zlwaterfield commented 6 years ago

I ended up forking the repo and building it in my project and its working now. Not able to determine why it wasnt working as a module import.

Thanks for the project, working great now!

gilbarbara commented 6 years ago

Try importing it with react-joyride/lib. It could something with your bundle configuration