net::ERR_CONNECTION_CLOSED 200 when setting up LaunchDarkly

[paulmbw]

I'm setting up LaunchDarkly in a React project with the guide. My setup us as follows:

• launchdarkly-react-client-sdk version 3.0.3

index.tsx:

const LDProvider = withLDProvider({
  clientSideID: "12345",
  context: {
    kind: "user",
    key: "example_user",
    name: "Paul",
    email: "paul@aster.com",
  },
})(App);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <LDProvider />
    </ThemeProvider>
  </React.StrictMode>
);

I have a component wrapped with the HOC withLDConsumer()(Component); and I'm trying to access flags when passed as a prop, but the prop is empty. Upon inspecting the console logs, I'm getting the following errors:

GET https://clientstream.launchdarkly.com/eval/<id>/<secret> net::ERR_CONNECTION_CLOSED 200

I'm also getting this warning:

loggers.js:15 [LaunchDarkly] Error on stream connection: {"isTrusted":true}, will continue retrying after 658 milliseconds.

Finally, this is what the dashboard shows unsurprisingly:

Where have I gone wrong? Any help would be greatly appreciated!

[codyde]

FYI - I got with @paulmbw and got him setup, His "Expose Flag to Client Side" wasnt set in the UI. Also took him through how to use asyncWithLDProvider as an alternative setup. I believe hes going to close this out shortly...

[paulmbw]

Correct! Thanks for the help @codyde much appreciated!

You can enable Make available for Client-side on the Account Settings page (under the flag defaults tab)

[louis-launchdarkly]

Thank you @codyde for your help, and thank you @paulmbw for leaving a note for people who may stumble into this issue in the future.