5

Trying to use the React and JavaScript SDKs for Optimizely, but getting the following error in the console:

OPTIMIZELY: Optimizely object is not valid. Failing isFeatureEnabled.

More info about my setup below:

Installed via Yarn: yarn add @optimizely/react-sdk

Import statement in the app container:

import {
  createInstance
} from '@optimizely/react-sdk'

Logic in render function:

const optimizely = createInstance({
  sdkKey: '<SDK_KEY>',
})

const enabled = optimizely.isFeatureEnabled('example_feature', 'user123');

I get this error in the Chrome console:

OPTIMIZELY: Optimizely object is not valid. Failing isFeatureEnabled.
asametrical
  • 268
  • 1
  • 8

1 Answers1

9

The Optimizely object will log that error when you call isFeatureEnabled before the SDK has successfully loaded your project's datafile. This can happen for a number of reasons outlined below. Looking at the code example provided in the question, it looks like reason #4 is the most likely cause of the error, but here are all of them:

1. Bad SDK key

If you pass in a bad SDK Key to createInstance, the SDK will not successfully load the datafile and you will get this error.

const optimizely = createInstance({
  sdkKey: 'invalid-sdk-key'
})

2. Malformed datafile

If you are passing in the datafile directly to createInstance, but pass in an object that isn't the proper datafile format, you will get this error:

const optimizely = createInstance({
  datafile: { wrong: 'format' }
})

3. Inaccessible datafile

Make sure you can access the url of your datafile in a web browser: https://cdn.optimizely.com/datafiles/<Your_SDK_Key>.json. If you get an AccessDenied (403) or Not Found (404) error and your account is new, make sure you create something in the Optimizely UI so that Optimizely is triggered to create and upload a proper datafile.

If in the console of your running application you see a 403 or 404 for the request to the datafile, ensure there are no ad-blockers, firewalls, or proxies preventing the SDK from requesting the datafile on Optimizely's CDN from the SDK.

4. Not waiting for Optimizely SDK to be ready

Even if you have the right SDK Key and the SDK can access Optimizely's CDN. If you don't give the SDK enough time for the datafile request to finish, you will be trying to use the SDK before it's ready.

In the JavaScript SDK, this can be solved by using the onReady method:

const optimizely = createInstance({
  sdkKey: 'valid-sdk-key',
});

optimizely.onReady().then(() => {
  // optimizely is ready to use, with datafile downloaded from the Optimizely CDN
});

If using the <OptimizelyFeature> component of the React SDK, then the <OptimizelyFeature> component will automatically wait until the <OptimizelyProvider> has successfully loaded the datafile before evaluating isFeatureEnabled.

asametrical
  • 268
  • 1
  • 8
  • I have this issue and I want to know how to handle it if there IS an adblocker present blocking the request. – PaperThick Sep 25 '20 at 14:17
  • 1
    If there is an adblocker, you'll want to host the datafile on your own servers and use a `urlTemplate` parameter to tell the SDK to download the datafile from your server rather than from Optimizely's: https://docs.developers.optimizely.com/full-stack/docs/initialize-sdk-javascript – asametrical Sep 29 '20 at 21:41