https://www.growthbook.io/ logo
Join Slack
Powered by
Hello! I'm looking for some help getting started. ...
# ask-questions
c
Hello! I'm looking for some help getting started. I'm using the react sdk, and I think I have everything set up as described in the documentation, but my test feature (named 
test-feature
) is always returning 
false
, Halp?
b
Hi Steve 👋🏻 We'd need to see a screenshot of the Feature's detail page in order to assist. Could you post that here?
c
@brief-honey-45610 thank you for reaching out to help. Here's the screenshot
image.png
s
Thanks for sharing that—everything looks good there. Can you share the code from React?
c
image.png
image.png
thanks for taking a look @strong-mouse-55694
s
Where are you doing the actual flag evaluation for 
test-feature
?
c
image.png
image.png
sorry, wrong feature flag. I changed 
test_feature
to 
test-feature
- same result
I had a hypothesis that maybe it had something to do with the vite env vars not being set properly when rendering serverside, so I abstracted the resolution of the env vars and validated that the values are as configured:
Copy code
{
  isBrowser: false,
  GROWTHBOOK_URL: '<https://cdn.growthbook.io>',
  GROWTHBOOK_KEY: 'sdk-YhNvQAT3LV7iMGzY'
}
updated code looks like this
still no beans
s
Is this a next.js app?
c
react-router v7
aka remix
s
Gotcha. My guess right now is that the feature flag is being evaluated before the flags have loaded. In your homepage component, can you try adding:
Copy code
const gb = useGrowthBook();
console.log(gb.getFeatures())
c
hmm, interesting
yeah ill give it a shot
I can also fold that into the abstracted wrapper function(s)
s
sorry, updated the rest of the code. I want to see if the features have loaded properly. You'll need to import the 
useGrowthBook
hook.
c
prints an empty object 
{}
wait... hold up...
I made a nooby mistake...
yeah, same result
I had the 
isBrowser
conditional inverted in the ternary
correct logic is
Copy code
const isBrowser = typeof window !== 'undefined';
const GROWTHBOOK_URL = (isBrowser ? import.meta.env.VITE_GROWTHBOOK_URL : process.env.VITE_GROWTHBOOK_URL) as string;
const GROWTHBOOK_KEY = (isBrowser ? import.meta.env.VITE_GROWTHBOOK_KEY : process.env.VITE_GROWTHBOOK_KEY) as string;
but still no dice
am I missing an 
await
somewhere?
s
could be. However, I don't think any features are being returned from GB. In GrowthBook, if you go to your SDK connection, you'll see a URL for your API endpoint. If you paste that in the browser, what is returned? It should be this: https://cdn.growthbook.io/api/features/sdk-YhNvQAT3LV7iMGzY
c
{"status":200,"features":{},"dateUpdated":"2025-01-28T05:05:09.082Z"}
s
Yeah, the payload is empty.
c
😅 sho 'nuff
s
But now we need to figure out why that is. Can you share a screenshot of your SDK connection?
c
I'm unsure what you're asking for
Copy code
curl '<https://cdn.growthbook.io/api/features/sdk-YhNvQAT3LV7iMGzY>' \
  -H 'accept: */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'cache-control: no-cache' \
  -H 'origin: <http://localhost:5173>' \
  -H 'pragma: no-cache' \
  -H 'priority: u=1, i' \
  -H 'referer: <http://localhost:5173/>' \
  -H 'sec-ch-ua: "Not A(Brand";v="8", "Chromium";v="132", "Google Chrome";v="132"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "Linux"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36'
here's a curl representation of the request for the features
s
sorry, I just meant a screenshot of the SDK connection from GB. The more important thing, though, is to ensure that the SDK is enabled for the project and environment where you set up the feature flag.
c
that;s probably the issue
I don't recall doing anything like that
s
If you go to the SDK connection and click edit, it'll bring up this modal:
By default, it shouldn't be an issue, but it could be a reason why you're not seeing the payload as expected
c
Progress - the sdk env was set to 
dev
instead of 
production
I changed it to 
production
, and now: • The 
test-feature
flag reports 
true
in the browser • But it still reports 
false
when rendered server-side
ok, I moved some stuff around, and now it's always reporting 
true
I'm unblocked
thank you!
happy to share final code if it's helpful
s
Awesome 🎉 Glad you got it sorted. Yeah, that'd be great on sharing. I know some of our other users have been interested in Remix + GrowthBook, so it'd likely be helpful!
c
FeatureFlagsProvider.tsx
FeatureFlagsProvider.tsx
this isn't really doing much of anything different than your SDK, but it wraps it up into a convenient little package that is abstracted from growthbook specific implementation details
🙌 1
28 Views
Open in Slack
PreviousNext
Powered by