ESM barrel export broken in 0.4.0 - missing .js extensions in internal imports

[simonziegler]

Description

The main barrel export (@material/material-color-utilities) fails to resolve in ESM environments due to missing .js extensions in internal import statements.

Error

error: [ERR_MODULE_NOT_FOUND] Cannot find module 
'.../node_modules/@material/material-color-utilities/dynamiccolor/dynamic_scheme' 
imported from '.../node_modules/@material/material-color-utilities/scheme/scheme_content.js'

Did you mean to import with the ".js" extension?

Reproduction

// Fails in 0.4.0, works in 0.3.0
import { DynamicScheme } from '@material/material-color-utilities';

Root Cause

Internal .js files use extensionless imports that don't resolve in strict ESM:

// scheme_content.js (0.4.0)
import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';  // ❌ Missing .js

// Should be:
import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';  // ✅

This pattern appears throughout the scheme/*.js files importing from dynamiccolor/.

Workaround

Direct file imports bypass the barrel and work:

import { Hct } from '@material/material-color-utilities/hct/hct.js';
import { Cam16 } from '@material/material-color-utilities/hct/cam16.js';

Environment

• Version: 0.4.0 (regression from 0.3.0)
• Build: TypeScript 5.9.3 (tsc) with moduleResolution: "bundler", bundled via Rollup 4.55.2
• Runtime: Node.js 24.x with ESM ("type": "module")
• Package manager: pnpm

AI Generation

I have been vibe coding updates to code I wrote a few months back using version 0.3.0. This issue has been identified by GitHub CoPilot using Clause 4.5 Opus, which I asked to open this issue for me. Aside from this section, Opus drafted the issue.

[wuda-io]

yes i have the same problem unfortunately. Please fix this. Thanks.
With 0.3.0 it works.

[simonziegler]

There has been an open PR #193 for two weeks. This would fix the issue.

[simonziegler]

Bumping this after 1.5 months - this is a very significant usability issue.

[Blackfaded]

Here is a patchfile for you while waiting:

diff --git a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec.d.ts b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec.d.ts
index 4ea9db1..5e98b9f 100644
--- a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec.d.ts
+++ b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec.d.ts
@@ -16,7 +16,7 @@
  */
 import { ColorSpecDelegateImpl2021 } from './color_spec_2021.js';
 import { ColorSpecDelegateImpl2025 } from './color_spec_2025.js';
-import type { DynamicColor } from './dynamic_color';
+import type { DynamicColor } from './dynamic_color.js';
 import { DynamicScheme } from './dynamic_scheme.js';
 export type SpecVersion = '2021' | '2025';
 /**
diff --git a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2021.d.ts b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2021.d.ts
index cc9389b..0727f87 100644
--- a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2021.d.ts
+++ b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2021.d.ts
@@ -16,7 +16,7 @@
  */
 import { ColorSpecDelegate } from './color_spec.js';
 import { DynamicColor } from './dynamic_color.js';
-import type { DynamicScheme } from './dynamic_scheme';
+import type { DynamicScheme } from './dynamic_scheme.js';
 /**
  * A delegate for the dynamic color spec of a DynamicScheme in the 2021 spec.
  */
diff --git a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.d.ts b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.d.ts
index a8b3efa..47661a1 100644
--- a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.d.ts
+++ b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { ColorSpecDelegateImpl2021 } from './color_spec_2021.js';
-import { DynamicColor } from './dynamic_color';
+import { DynamicColor } from './dynamic_color.js';
 /**
  * A delegate for the dynamic color spec of a DynamicScheme in the 2025 spec.
  */
diff --git a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.js b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.js
index 8bef961..2715979 100644
--- a/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.js
+++ b/node_modules/@material/material-color-utilities/dynamiccolor/color_spec_2025.js
@@ -18,7 +18,7 @@ import { Hct } from '../hct/hct.js';
 import * as math from '../utils/math_utils.js';
 import { ColorSpecDelegateImpl2021 } from './color_spec_2021.js';
 import { ContrastCurve } from './contrast_curve.js';
-import { DynamicColor, extendSpecVersion } from './dynamic_color';
+import { DynamicColor, extendSpecVersion } from './dynamic_color.js';
 import { ToneDeltaPair } from './tone_delta_pair.js';
 import { Variant } from './variant.js';
 /**
diff --git a/node_modules/@material/material-color-utilities/dynamiccolor/material_dynamic_colors.d.ts b/node_modules/@material/material-color-utilities/dynamiccolor/material_dynamic_colors.d.ts
index 221cbad..829d577 100644
--- a/node_modules/@material/material-color-utilities/dynamiccolor/material_dynamic_colors.d.ts
+++ b/node_modules/@material/material-color-utilities/dynamiccolor/material_dynamic_colors.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { DynamicColor } from './dynamic_color.js';
-import type { DynamicScheme } from './dynamic_scheme';
+import type { DynamicScheme } from './dynamic_scheme.js';
 /**
  * DynamicColors for the colors in the Material Design system.
  */
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_content.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_content.d.ts
index 1d71694..07c215b 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_content.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_content.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A scheme that places the source color in `Scheme.primaryContainer`.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_content.js b/node_modules/@material/material-color-utilities/scheme/scheme_content.js
index e06c67b..29d62f7 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_content.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_content.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A scheme that places the source color in `Scheme.primaryContainer`.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_expressive.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_expressive.d.ts
index fb72fb0..e689244 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_expressive.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_expressive.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A Dynamic Color theme that is intentionally detached from the source color.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_expressive.js b/node_modules/@material/material-color-utilities/scheme/scheme_expressive.js
index 43d05c6..baf7ca3 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_expressive.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_expressive.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A Dynamic Color theme that is intentionally detached from the source color.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.d.ts
index ce8cd7f..9676361 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A scheme that places the source color in `Scheme.primaryContainer`.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.js b/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.js
index a7461cd..602d1ee 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_fidelity.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A scheme that places the source color in `Scheme.primaryContainer`.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.d.ts
index df109cc..d3fad5e 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A playful theme - the source color's hue does not appear in the theme.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.js b/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.js
index 87443af..aeaff55 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_fruit_salad.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A playful theme - the source color's hue does not appear in the theme.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.d.ts
index a52e962..bd9f3a0 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /** A Dynamic Color theme that is grayscale. */
 export declare class SchemeMonochrome extends DynamicScheme {
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.js b/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.js
index 30ad712..d18d656 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_monochrome.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /** A Dynamic Color theme that is grayscale. */
 export class SchemeMonochrome extends DynamicScheme {
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_neutral.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_neutral.d.ts
index 733d46f..a2146ba 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_neutral.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_neutral.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /** A Dynamic Color theme that is near grayscale. */
 export declare class SchemeNeutral extends DynamicScheme {
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_neutral.js b/node_modules/@material/material-color-utilities/scheme/scheme_neutral.js
index 0d03a5e..e4cffaa 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_neutral.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_neutral.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /** A Dynamic Color theme that is near grayscale. */
 export class SchemeNeutral extends DynamicScheme {
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.d.ts
index 582f8dc..9119499 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A playful theme - the source color's hue does not appear in the theme.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.js b/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.js
index 65e6d3f..f80be9a 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_rainbow.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A playful theme - the source color's hue does not appear in the theme.
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.d.ts
index 65033b3..d06fe6c 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A Dynamic Color theme with low to medium colorfulness and a Tertiary
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.js b/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.js
index 6c506c3..c48f498 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_tonal_spot.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A Dynamic Color theme with low to medium colorfulness and a Tertiary
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.d.ts b/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.d.ts
index 676d54f..00e25cb 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.d.ts
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { SpecVersion } from '../dynamiccolor/color_spec.js';
-import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme, Platform } from '../dynamiccolor/dynamic_scheme.js';
 import { Hct } from '../hct/hct.js';
 /**
  * A Dynamic Color theme that maxes out colorfulness at each position in the
diff --git a/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.js b/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.js
index cba1172..3a37230 100644
--- a/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.js
+++ b/node_modules/@material/material-color-utilities/scheme/scheme_vibrant.js
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicScheme } from '../dynamiccolor/dynamic_scheme';
+import { DynamicScheme } from '../dynamiccolor/dynamic_scheme.js';
 import { Variant } from '../dynamiccolor/variant.js';
 /**
  * A Dynamic Color theme that maxes out colorfulness at each position in the