Flagsmith / flagsmith-js-client

Javascript Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
https://www.flagsmith.com/
BSD 3-Clause "New" or "Revised" License
60 stars 38 forks source link

[Bug] - TypeError: Cannot read properties of null (reading 'getValue') #189

Closed joelpierre closed 3 months ago

joelpierre commented 1 year ago

Currently seeing the below, I think there may be some guard clauses missing before calling "getValue"

TypeError: Cannot read properties of null (reading 'getValue')
    at /var/task/node_modules/.pnpm/flagsmith@3.19.1/node_modules/flagsmith/react.js:1:1616
    at Array.map (<anonymous>)
    at c (/var/task/node_modules/.pnpm/flagsmith@3.19.1/node_modules/flagsmith/react.js:1:1581)
    at e.useFlags (/var/task/node_modules/.pnpm/flagsmith@3.19.1/node_modules/flagsmith/react.js:1:2458)
novakzaballa commented 1 year ago

Hi @joelpierre, can you please provide more details and context about this issue, including how can we reproduce it?

joelpierre commented 1 year ago

Hey, it turns out it was very bespoke to our setup with server side Algolia not playing ball, however it would be great if in your SDK the useFlag hook didn't do this

const res = useMemo(() => {
        const res: any = {}
    flags.map((k) => {
        res[k] = {
                enabled: flagsmith!.hasFeature(k), // <------  non-null assertion
                value: flagsmith!.getValue(k), // <------  non-null assertion
        }
    }).concat(traits?.map((v) => {
        res[v] = flagsmith!.getTrait(v) // <------  non-null assertion
    }))

As you can see the flagsmith! which is what is blowing up for us. Not sure if you can change these to flagsmith?. ...

kyle-ssg commented 1 year ago

Hey again, I think maybe we could, however I'm not sure what cases would exist where the Flagsmith Providers don't get a Flagsmith instance. Was there a good example that I'm maybe not understanding?

joelpierre commented 1 year ago

With Algolia SSR they want you to do some pretty weird and wonderful things for server side rendering as you can see here: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#with-nextjs and as a result we have to pre-render the Algolia listing "stuff" server side and renderToString... in essence all our _app providers are not loaded in this serverState until hydration kicks in on the client.

It would be good if flagsmith didn't blow up though haha as I went down a rabit hole debugging it 😬 . OR if there was more of a check to ensure the provider state was set before trying to do anything further?

novakzaballa commented 1 year ago

Hi there, could you please include a sample minimal project failing, and a clear description of what would be the expected behavior?

novakzaballa commented 3 months ago

We're going to close this issue due to inactivity. Please feel free to reopen it if you have the required information.