open-feature/js-sdk

[BUG] Issue with setContext when updating @openfeature/core from 0.0.25 to 0.0.26

Closed this issue · 7 comments

EDIT: just did some testing and this was working on version 0.0.25, but still breaks on 0.0.26

Observed behavior

setContext is throwing an error after updating from 0.0.23 to 0.026.

This is the error thrown:

TypeError
Cannot read properties of undefined (reading 'entries')

Error happens when running this code:

export const setOpenFeatureTargetingKey = async (uuid: string) =>
  await OpenFeature.setContext({
    targetingKey: uuid,
  })

Error is pointing to this section of the code:

const oldContext = this._context;
this._context = context;
const defaultContextNameProviders = Array.from(this._clientProviders.entries()).filter(([name]) => !this._namedProviderContext.has(name)).reduce((acc, [name, provider]) => {
   acc.push({ name, provider });
   return acc;
}, []);

Expected Behavior

No error is thrown when downgrading back to 0.0.23 and context is set.

Steps to reproduce

import { LaunchDarklyClientProvider } from '@openfeature/launchdarkly-client-provider'
import { OpenFeature, InMemoryProvider } from '@openfeature/react-sdk'

export const initOpenFeature = () => {
  const ldClientSideId = process.env.VITE_LAUNCH_DARKLY_CLIENT_SIDE_ID

  if (ldClientSideId) {
    const ldOptions = {
      streaming: true,
    }
    const ldOpenFeatureProvider = new LaunchDarklyClientProvider(
      ldClientSideId,
      ldOptions
    )
    // @ts-expect-error Silences "'LaunchDarklyClientProvider' is not assignable to parameter of type 'Provider'"
    OpenFeature.setProvider('openFeatureClient', ldOpenFeatureProvider)
  } else {
    OpenFeature.setProvider(new InMemoryProvider())
  }
}

export const setOpenFeatureTargetingKey = async (uuid: string) =>
  await OpenFeature.setContext({
    targetingKey: uuid,
  })

export const clearOpenFeatureTargetingKey = async () =>
  await OpenFeature.clearContext()

Hey @nguyennick197, I can reproduce this error, but only if I'm mismatching some dependencies (mixing the @openfeature/web-sdk with an incompatible version of @openfeature/core).

A few questions:

  • What package manager are you using (npm? yarn? pnpm?)
  • Can you attach your package JSON?
  • Do you have warnings from your package manager about mismatched versions when you install?

Ideally, in your situation, you would not directly install the core or web-sdk packages, you would get both of these transitively (NPM automatically installs peers) when you install @openfeature/react-sdk and such mismatches shouldn't happen. Unfortunately, yarn does not automatically install peers, so it's up to you to do so, and make sure the packages are all compatible if you're using yarn. Specifically, the each web-sdk version requires a specific version of core that must match to be sure you'll never get errors like this.

If you are using NPM, you should just be able to remove the @openfeature/core and @openfeature/web-sdk deps and only mention the react sdk (@openfeature/react-sdk).

Thanks for the response @toddbaert! I really appreciate your help with this.

I'm using npm and didn't receive warnings warnings about mismatched versions during the install.

This is my package.json:

{
  "name": “app-name”,
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
    "@openfeature/core": "^0.0.26",
    "@openfeature/launchdarkly-client-provider": "^0.2.1",
    "@openfeature/react-sdk": "^0.1.0-experimental",
    "@openfeature/web-sdk": "^0.4.12",
    ...
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
   "engines": {
    "node": ">=18.12.1 <19",
    "npm": "9.x"
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "lint-staged": {
    "**/*.{js[x],ts[x],md,json,html,scss}": "prettier --write"
  }
}

I tried removing the @openfeature/core and @openfeature/web-sdk packages, but that gives me a build error for the @openfeature/launchdarkly-client-provider:

Error: Build failed with 2 errors:
node_modules/@openfeature/launchdarkly-client-provider/index.esm.js:1:124: ERROR: Could not resolve "@openfeature/web-sdk"
node_modules/@openfeature/react-sdk/dist/esm/index.js:2:47: ERROR: Could not resolve "@openfeature/web-sdk"
    at failureErrorWithLog (/Users/nick/Documents/GitHub/heard-app/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/nick/Documents/GitHub/heard-app/node_modules/esbuild/lib/main.js:1058:25
    at /Users/nick/Documents/GitHub/heard-app/node_modules/esbuild/lib/main.js:1525:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 124,
        file: 'node_modules/@openfeature/launchdarkly-client-provider/index.esm.js',
        length: 22,
        line: 1,
        lineText: "import { ErrorCode, OpenFeatureEventEmitter, ProviderStatus, GeneralError, ProviderEvents, StandardResolutionReasons } from '@openfeature/web-sdk';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "@openfeature/web-sdk" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "@openfeature/web-sdk"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 47,
        file: 'node_modules/@openfeature/react-sdk/dist/esm/index.js',
        length: 22,
        line: 2,
        lineText: 'import { ProviderEvents, ProviderStatus } from "@openfeature/web-sdk";',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "@openfeature/web-sdk" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "@openfeature/web-sdk"'
    }
  ],
  warnings: []
}

Hey @nguyennick197, could you please remove just @openfeature/core from your package.json and try again? I could recommend deleting your node_modules before running npm install.

Ya, something is fishy here. Take a look at our official React demo app's package.json. Note that the only SDK we declare there is the react SDK.

If you check the package.lock.json, however, you will see both core and the web-sdk are defined there (NPM resolved them transitively). This is what we'd expect to see.

I would try to follow the same, making sure you delete your node_modules and any compiled output before you do.

@nguyennick197 any news on this one?

@toddbaert Initially I still had the issue after deleting my node_modules, but I put it aside because it was working with on 0.0.25 for me. I recently had some bandwidth to look more into it and turns out I had legacy-peer-deps=true in my .npmrc file. Installing just @openfeature/react-sdk after removing the legacy-peer-deps worked for me! Appreciate all the help here, this issue can be closed now.

Oh actually that's a good call-out though! legacy-peer-deps will certainly cause similar issues for others (TBH that setting scares me, but I know it was needed for legacy reasons). Hopefully others with similar issues will stumble onto your issue!