[Bug]: @carbon-labs/utilities imports

[lee-chase]

Browser

Chrome

Package version

N/A

React version

19

Description

When attempting to convert a project to typescript received the following complaint.

The Problem
The @carbon-labs/react-theme-settings package has an ES module compatibility issue when used with Vite's development server. Specifically:

Technical Details
Error Type: Module resolution error

Root Cause: The package is trying to import usePrefix from @carbon/react, but this export is not available in the ES module build that Vite uses.

This appears to be as a result of a common @carbon-labs/react... package issue with Bob suggesting the following change. However, this does point at the source files rather than built files.

Change the import in ThemeSettings.tsx to use the package's main export:

// Change from:
import { usePrefix } from '@carbon-labs/utilities/es/index.js';

// To:
import { usePrefix } from '@carbon-labs/utilities';

typescript


The package.json already exports the main entry point correctly:

"exports": {
  ".": {
    "default": "./src/index.js"
  }
}

Reproduction/example

https://github.com/carbon-design-system/carbon-react-router-starter/tree/main-ts

Steps to reproduce

Clone the project and re-introduce the theme settings usage seen in main.

See the docs/ProfilePanel-issue.md in the target repo.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems