Skip to content

Missing page.css.map in @react-spectrum/s2 Package #8355

@ajsb85

Description

@ajsb85

Provide a general summary of the issue here

Hi @devongovett

First, thank you for maintaining such a fantastic and comprehensive component library — it’s been a great help in our projects.

I’m reaching out to report a minor developer experience issue when using @react-spectrum/s2 with Vite. During development, the Vite server console shows a warning:

Failed to load source map for .../node_modules/@react-spectrum/s2/page.css.
Error: ENOENT: no such file or directory, open '.../node_modules/@react-spectrum/s2/page.css.map'

This happens because the page.css file references a source map (/*# sourceMappingURL=page.css.map */), but the corresponding page.css.map file is missing from the published npm package. As a result, bundlers like Vite attempt to load the map and fail, triggering this warning.

While this doesn’t break functionality, it adds noise to the console, which can obscure other important messages during development.

Would it be possible to include the missing page.css.map file in the package? Adding it would eliminate the warning and improve the developer experience for those using modern build tools.

Thanks so much for your time and for all the hard work you put into this library!

Best regards,

🤔 Expected Behavior?

When running the Vite development server using the @react-spectrum/s2 package, no warnings about missing source maps should appear. The page.css file’s source map reference should resolve correctly without causing any 404 errors or console warnings.

😯 Current Behavior

When running the Vite server, a warning appears in the console:

Failed to load source map for .../node_modules/@react-spectrum/s2/page.css.
Error: ENOENT: no such file or directory, open '.../node_modules/@react-spectrum/s2/page.css.map'

This happens because the page.css.map file is missing from the npm package, although the CSS file references it. This causes unnecessary console noise during development, even though the app continues to work fine.

💁 Possible Solution

Include the missing page.css.map file in the published npm package for @react-spectrum/s2. This will ensure that source map references in page.css resolve correctly, eliminating the 404 errors and console warnings during development.

Alternatively, if including the source map file is not feasible, consider removing the source map reference comment from page.css before publishing the package to avoid triggering attempts to load a missing map file.

🔦 Context

This issue causes a persistent warning in the console when using modern build tools like Vite, which try to load source maps for better debugging experience. Although it does not break the app, the warnings create noise that can obscure real errors or important messages during development. Fixing this will improve developer experience and make debugging smoother for anyone using @react-spectrum/s2.

🖥️ Steps to Reproduce

  1. Install @react-spectrum/s2 in a project using Vite as the development server.
  2. Run the Vite dev server (vite or npm run dev).
  3. Observe the console warnings about failing to load the source map for page.css.

For a quick test, you can start with the React Spectrum S2 Style Macro CodeSandbox template:
https://codesandbox.io/p/devbox/react-spectrum-s2-style-macro-template-h6fpsq

Version

3.0.0-nightly-4150364a2-250606

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

Ubuntu

🧢 Your Company/Team

@firechip

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions