mui / mui/base-ui

[all components] Package structure breaks Sandpack and CDN resolution (versions 1.2.0 and 1.3.0)

Open
#4,335 2 comments 0 reactions 1 assignee Claimed by @brijeshb42 View on GitHub
scope: all components type: bug
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Summary

The current build output and exports configuration of @base-ui/react and @base-ui/utils completely breaks browser-based environments like Sandpack (with `react-ts` template specifically)

## Current behavior

There are two distinct breaking issues depending on the version:

Issue 1: Version 1.3.0 fails to load entirely from CDNs When using 1.3.0 in Sandpack, the package fails to resolve entirely. It appears the recent changes to error minification and build outputs have resulted in a package structure that unpkg/jsdelivr cannot properly serve to browser bundlers.

Issue 2: Version 1.2.0 (and utils 0.2.6) breaks legacy bundlers due to internal .js imports combined with catch-all exports When using 1.2.0 in Sandpack's default react-ts template, importing any component (e.g., Tooltip) causes a fatal module resolution error: Could not find module in path: '@base-ui/utils/formatErrorMessage.js' relative to '/node_modules/@base-ui/utils/store/createSelector.js'

Root Cause of Issue 2: In @base-ui/utils/package.json, there is a catch-all export:

```
"./*": {
"import": { "default": "./esm/*.js" }
}
```

Inside esm/store/createSelector.js, there is an explicit extension import:

import _formatErrorMessage from "../formatErrorMessage.js";
When bundlers like Sandpack's Nodebox (or older Webpack versions) evaluate this, they incorrectly pass the internal relative import through the exports map. This results in the bundler appending a second .js extension, looking for esm/formatErrorMessage.js.js, which 404s.

## Expected behavior

Base UI should be usable in CodeSandbox/Sandpack without requiring users to manually inject virtual files or write custom server-side esbuild steps to flatten the library.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.