Cannot connect to launchdarkly while using this library

[shankurmahajan]

I keep getting this message on connecting to launchdarkly via react-launch-darkly. I am using the correct client key and user key is just email. May I know where I am going wrong.

This is the code I am using

    <LaunchDarkly
      clientId="**************"
      user={{ key: '**********'}}
    >
      {props.children}
    </LaunchDarkly>

[shankurmahajan]

@jacobmoretti please look into it

[shankurmahajan]

@sethbattin tagging

[shankurmahajan]

tagging @threehams @bearMountain

[sethbattin]

@shankurmahajan, I think the error message you are seeing describes the problem, which is that this.context is undefined. May I ask you what version of react you are using? Also can you describe the component hierarchy immediately surrounding your usage of <FeatureFlag>? Obviously that component needs to reside within the <LaunchDarkly> wrapper, so please confirm that just to be thorough.

My first guess is that you are the first person to report a problem with this library's version of react-broadcast and react@16.3. That is, we do not have up-to-date context handling. I'm speculating, so that theory would need to be confirmed with some research and/or experimenting. If you are able to confirm or deny that a dependency update is effective at resolving this, by all means please submit a patch.

Barring that, I sense that you might not get a response as urgently as your 4-way tagging suggests you would like. It is Friday evening, afterall. But I should be able to give it some attention within the next week.

[sethbattin]

Hm, a quick look at the docs means my theory is certainly wrong: https://reactjs.org/docs/context.html#legacy-api

React previously shipped with an experimental context API. The old API will be supported in all 16.x releases...

So that can't (shouldn't) be the problem. I guess, all the more reason to describe your usage in more detail. :)

[shankurmahajan]

Hey @sethbattin , thanks for the feedback

This is the way I am setting it up. FYI, I am new to react

Index.js ReactDOM.render(<App />, document.getElementById('root')); App.jsx

const App = props => (
  <div className="App">
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <MuiThemeProvider theme={theme}>
          <div className="app__container">
            <TermsChecker />
            <SessionChecker />
            <EmployeeSessionChecker />
            <MaintenanceRedirect />
            <Switch>
              <Route path="/employee" component={EmployeeHeader} />
              <Route component={Header} />
            </Switch>
            <div className="page-container">
              <div className="content-container">
                <Switch>
                  <AuthenticatedRoute exact path="/" component={Landing} />
                  <Route path="/site-maintenance" component={MaintenancePage} />
                  <AuthenticatedRoute
                    exact
                    path="/accounts/link"
                    component={LinkAccountPage}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/accounts/:accountId/recent-products"
                    component={RecentProducts}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/accounts/:id/:tab"
                    component={Account}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/accounts/:accountId/invoices/:invoiceId"
                    component={Invoices}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/products/:labelId/labels"
                    component={ProductLabels}
                  />
                  <Route
                    exact
                    path="/getting-started"
                    component={Registration}
                  />
                  <Route
                    exact
                    path="/update/:email/:eid"
                    component={Registration}
                  />
                  <Route path="/register" component={Registration} />
                  <Route path="/register" component={Registration} />
                  <Route path="/confirm/:identity" component={Registration} />
                  <Route
                    path="/confirm/:identity/:accessCode"
                    component={Registration}
                  />
                  <Route
                    exact
                    path="/forgot-password"
                    component={ForgotPassword}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/make-a-secure-payment"
                    component={MakeAPaymentComponent}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/review-payment"
                    component={ReviewPayment}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/confirm-payment"
                    component={ConfirmPayment}
                  />
                  <AuthenticatedRoute
                    exact
                    path="/manage-payments"
                    component={ManagePayment}
                  />
                  <AuthenticatedRoute
                    path="/notifications"
                    component={Notifications}
                  />
                  <AuthenticatedRoute path="/agronomy" component={Agronomy} />
                  <Route path="/employee" component={Employee} />
                  <Route exact path="/login" component={Login} />
                  <Route
                    exact
                    path="/password-reset/:verificationCode"
                    component={PasswordReset}
                  />
                  <Route exact path="/contact" component={Contact} />
                  <Route exact path="/terms-of-use" component={Terms} />
                  <AuthenticatedRoute
                    exact
                    path="/accept-terms"
                    component={Terms}
                  />
                  <Route component={Page404} />
                </Switch>
              </div>
              <Route component={Footer} />
            </div>
          </div>
        </MuiThemeProvider>
      </ConnectedRouter>
    </Provider>
    <div>
      <LaunchDarkly
        clientId="******************"
        user={{
          firstName: 'shankur',
          lastName: 'mahajan',
          email: 'shankyshivan@gmail.com',
        }}>
        {props.children}
      </LaunchDarkly>
    </div>
  </div>
);

[sethbattin]

Ah, so it looks like you missed this precondition:

...that component (FeatureFlag) needs to reside within the wrapper...

It looks like you've appended LaunchDarkly as a sibling of the entirety of your application. That means that the rest of your app has no access to it. It needs to be a parent of usages of FeatureFlag; the same pattern as Provider, ConnectedRouter, and MuiThemeProvider. That is necessary for the subscribe/broadcast mechanism to work.

Side note: in your example code, you are rendering the wrapper with props.children, which doesn't make sense because you pass this component directly to ReactDOM.render(<App />..., so it doesn't have any children and never will. Possibly you edited this code in order to paste it here, and introduced that as a bug? That pattern appears in our readme which describes using the component as a high-level application wrapper, but again that only makes sense if it's part of a hierarchy with child components. This section of the react docs describes correct usage of children: https://reactjs.org/docs/composition-vs-inheritance.html#containment

[jacobmoretti]

@shankurmahajan Did @sethbattin comments resolve your issue?

[jacobmoretti]

Closing issue for lack of activity.