TypeError in fresh install

[joaomarceloods]

I decided to try out react-joyride, so I installed it and followed the steps in README. However when I run the app I immediately get a TypeError from inside the lib. I'm using it like this:

class MyComponent extends React.Component {
  render() {
    const { children, arrayOfSteps } = this.props

    return (
      <section>
        <Joyride
          ref={j => (this.joyride = j)}
          steps={[arrayOfSteps]}
          run={false}
          debug={false}
        />
        ...
        {children}
        ...
      </section>
    )
  }
}

And here's the error:

Uncaught TypeError: Cannot read property 'props' of undefined
    at checkStepValidity (eval at ./node_modules/react-joyride/es/index.js (app.js:9633), <anonymous>:793:23)
    at Array.every (<anonymous>)
    at ProxyComponent.checkStepsValidity (eval at ./node_modules/react-joyride/es/index.js (app.js:9633), <anonymous>:833:22)
    at ProxyComponent.componentDidMount (eval at ./node_modules/react-joyride/es/index.js (app.js:9633), <anonymous>:236:32)
    at commitLifeCycles (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:8770:24)
    at commitAllLifeCycles (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:9946:9)
    at HTMLUnknownElement.callCallback (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:542:14)
    at Object.invokeGuardedCallbackDev (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:581:16)
    at invokeGuardedCallback (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:438:27)
    at commitRoot (eval at ./node_modules/react-dom/cjs/react-dom.development.js (app.js:9465), <anonymous>:10050:9)

I believe the error happens on this line of code: https://github.com/gilbarbara/react-joyride/blob/master/src/scripts/index.jsx#L622

I don't understand why this would be null in the context of that line of code. I'm working on a legacy react app that renders server-side before serving the response, would this be a possible reason?

I appreciate any help.

[gilbarbara]

Yes, the current version doesn't support server-side rendering. Please try V2 with npm i react-joyride@next and follow the instructions here

[joaomarceloods]

V2 worked, but not out-of-the-box. The error on V2 was just easier to workaround: undefined window.

I got it working by requiring react-joyride only when window exists (i.e. browser):

const Joyride = !!global.window && require('react-joyride').default

import won't work because you can't use it with conditionals.

The usage is a bit verbose. You need to check that Joyride exists before using it:

return !!Joyride && <Joyride steps={arrayOfSteps} />

~Note: the double exclamation just checks if a variable has a value~.

Edit: the double exclamation is just casting the variable as a boolean.

[gilbarbara]

This will be fixed in 2.0.0-9 soon.

Fyi, !! cast any variable as a boolean not explicitly if it has a value. For example, an !![] would return true.

[danny-does-stuff]

I had the same issue, even though my app (made with create-react-app) is not using server-side rendering. It seems like it should just work using the standard install.

Installing with yarn add react-joyride@next took care of the problem for me.

[nthgol]

I have the same issue on a fresh install of 2.0.0-13:

Uncaught TypeError: Cannot read property 'props' of undefined
    at hasRequiredField (index.js:797)
    at Array.every (<anonymous>)
    at checkStepValidity (index.js:804)
    at Array.every (<anonymous>)
    at Joyride.checkStepsValidity (index.js:821)
    at Joyride.componentDidMount (index.js:224)
    at commitLifeCycles (react-dom.development.js:14361)
    at commitAllLifeCycles (react-dom.development.js:15462)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at PersistGate../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:270)
    at PersistGate._this.handlePersistorState (react.js:43)
    at Object.dispatch (redux.js:221)
    at Object.rehydrate (persistStore.js:59)
    at _rehydrate (persistReducer.js:54)
    at persistReducer.js:79

The error seems to be related to the codesandbox steps. Starting with a fresh 'step' array of steps={[{ content: 'hello!', target: '.mytarget'}]} it worked.

[suchibharani]

Is there any option to folk V2.0 ? Please help me on this. Thanks in advance