Avoid browser-external warnings for imports explicitly disabled by browser mappings
Description
Could Vite distinguish imports explicitly disabled by a package's browser mappings from unsupported Node imports that were not disabled?
PostCSS 8.5.28 declares path, url, fs, and source-map-js as false in its browser field. Its browser-compatible code reads properties from those modules to check whether the APIs are available. In Vite 8.3.0 development mode, those reads trigger 23 browser-externalized warnings, although the CSS transformation succeeds. The production build performs the same transformation without warnings.
This surfaced in successful WordPress/Gutenberg Vitest Browser Mode runs, but the reproduction below uses only Vite and PostCSS. It has no framework, test runner, Vite configuration, warning filter, or polyfill.
Suggested solution
For imports that the owning package explicitly maps to false, return a normal empty module during dependency optimization. Keep the existing diagnostics for unsupported Node imports without such a mapping.
The browser-field specification describes false as returning an empty object. This proposal concerns that explicit opt-out; it does not request global warning suppression or Node polyfills.
Alternative
We have a draft Gutenberg workaround that resolves only PostCSS's explicitly disabled imports to an empty module during Browser dependency optimization. Another possible approach would be changing PostCSS's browser packaging to avoid these availability checks. An upstream solution would avoid maintaining a package-specific resolver in consumers.
Additional context
I recognize that #9837 deliberately changed these accesses from errors to warnings after #9200, and that retaining the warnings was intentional. This request is to distinguish the narrower browser: { "module": false } case, rather than to restore Vite 2's behavior for all externalized modules.
Reproduction
Standalone reproduction with pinned dependencies
git clone https://gist.github.com/14be43e90b094e557dce5f826f214ddd.git vite-postcss-repro
cd vite-postcss-repro
npm ci
npm run dev
Open the printed local URL and the browser console. The page displays a { color: blue }, while the console emits 23 warnings during PostCSS initialization. For comparison, stop the dev server, run npm run build && npm run preview, and open the preview URL. The output is identical, with no warnings.
Representative messages:
Module "path" has been externalized for browser compatibility. Cannot access "path.isAbsolute" in client code.
Module "source-map-js" has been externalized for browser compatibility. Cannot access "source-map-js.SourceMapConsumer" in client code.
Module "url" has been externalized for browser compatibility. Cannot access "url.fileURLToPath" in client code.
Module "fs" has been externalized for browser compatibility. Cannot access "fs.existsSync" in client code.
Verified with Vite 8.3.0, PostCSS 8.5.28, Node.js 24.20.0, npm 11.19.0, and Chromium 153.0.8010.12 on macOS 27.0 arm64. Neither development nor production produced a page error.
AI assistance: Codex prepared and executed the reproduction and assisted with this report.
Source: vitejs/vite