Misconfigured package doesn't play well with Remix

[mikecousins]

Describe the bug
The NPM package is misconfigured with regards to esm/cjs types and as such certain build tools like Remix will not build successfully.

To reproduce
Make a Remix app in SPA mode
Add launchdarkly-react-client-sdk
Build

Expected behavior
Should build successfully.

Logs

import { useFlags } from "launchdarkly-react-client-sdk";
         ^^^^^^^^
SyntaxError: Named export 'useFlags' not found. The requested module 'launchdarkly-react-client-sdk' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'launchdarkly-react-client-sdk';
const { useFlags } = pkg;

SDK version
3.0.10

Language version, developer tools

OS/platform
Mac or Windows.

Additional context

Recommended fixes:
https://publint.dev/launchdarkly-react-client-sdk@3.0.10

[louis-launchdarkly]

Hello @mikecousins, thank you for reporting the issue. We will take a look at it and report back once we see can we apply the recommended fix (or if we have other suggestions).

Filed internally as 230629.

[mikecousins]

For now I forked it at: https://github.com/mikecousins/launchdarkly-react-client-sdk

I then released this package which works great with Next/Remix/etc: https://www.npmjs.com/package/@mikecousins/launchdarkly-react-client-sdk

[julianguyen]

I'm also experiencing this issue when I create a package in a monorepo with LaunchDarkly React SDK wrapper and use it in an application built with Vite. I get the same error as @mikecousins when running Vitest in the Vite application.

@louis-launchdarkly Are there any updates on when this will be updated?

[brycnguyen]

Do we have an update on a fix for this?

[GxDesign]

Bumping this, this broke on my vite build with Vercel

[abarker-launchdarkly]

I'm unable to reproduce this issue. The steps I used:

1. Created a new Remix SPA project: yarn create remix remix-spa-test --template remix-run/remix/templates/spa
2. Added LaunchDarkly React Client SDK: yarn add launchdarkly-react-client-sdk (which installs version 3.6.1)
3. Added import { LDProvider } from "launchdarkly-react-client-sdk" to app/entry.client.tsx and wrapped <RemixBrowser /> with an LDProvider
4. Added import { useFlags } from "launchdarkly-react-client-sdk" to app/routes/_index.tsx and used it to evaluate a flag and output the result on the default welcome page.

This works with no errors using both yarn dev and yarn build

I also tried the above steps while forcing the older SDK version yarn add launchdarkly-react-client-sdk@3.0.10 which also works with no errors.

What versions of Remix and Node are being used when the problem is observed?

[Jin39]

This package did not define type: module but defined:

 "exports": {
    "import": "./lib/esm/index.js"
  },

the ./lib/esm/index.js will be treated as commonjs module.

Solution
Rename files in ./lib/esm from *.js to *.mjs, and change "import": "./lib/esm/index.js" to "import": "./lib/esm/index.mjs"

or add type: module

[illandril]

Workaround for anyone running into this... --experimental-detect-module flag enabled for node (or update to a version with the flag enabled by default, e.g. upgrade from Node 20.18.3 to 20.19.1).