Skip to content

Investigate and fix vite build warnings #2115

Description

@kriswest

Vite 8 build warnings

Running npm run build from the repo root produces several warnings from Vite 8.2.0 across two workspaces: fdc3-workbench and fdc3-conformance. These should be addressed before the next release (or before Vite makes configLoader: 'native' the default).


1. configLoader: 'native' compatibility warnings

Both projects use patterns in their vite.config.ts that are unsupported by the upcoming native config loader.

fdc3-workbench:

(!) Your Vite config uses features that are unsupported by `configLoader: 'native'`:
  - ESM syntax in a file loaded as CommonJS (vite.config.ts:5:1).
    Use a `.mjs` extension or set `"type": "module"` in the closest package.json

fdc3-conformance:

(!) Your Vite config uses features that are unsupported by `configLoader: 'native'`:
  - `__dirname` (vite.config.ts:18:41). Use `import.meta.dirname` instead

Suggested fix: Add "type": "module" to each project's package.json (or rename config to .mts), and replace __dirname with import.meta.dirname in fdc3-conformance/vite.config.ts.


2. COMMONJS_VARIABLE_IN_ESM@jsdevtools/ono

Appears twice (once per fdc3-workbench build environment — legacy and modern):

[COMMONJS_VARIABLE_IN_ESM] The CommonJS `module` variable is treated as a global variable
in an ECMAScript module and may not work as expected
   ╭─[ ../../node_modules/@jsdevtools/ono/esm/index.js:9:5 ]
   │
 3 │ export { Ono } from "./constructor";
   │ ───┬──
   │    ╰──── This file is considered to be an ECMAScript module because of the `export` keyword here:
   │
 9 │     module.exports = Object.assign(module.exports.default, module.exports);
   │     ───┬──
   │        ╰────

Root cause: @jsdevtools/ono ships an ESM entry (esm/index.js) that still uses module.exports — a CJS pattern in an ES module. This is an upstream bug in the package.

Suggested fix: Check if a newer version of @jsdevtools/ono (or its consumer — likely @apidevtools/json-schema-ref-parser / $RefParser) resolves the issue. Alternatively, add a Vite alias or patch to avoid the broken ESM entry.


3. Chunk size warning (fdc3-workbench)

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rolldownOptions.output.codeSplitting to improve chunking
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

The main bundle is ~1.9 MB minified (526 kB gzip). This is the workbench dev tool so it's less critical for production, but code-splitting heavy dependencies (MUI, jsoneditor, etc.) would help.


4. SOURCEMAP_BROKENfix-source-map-support-global plugin (fdc3-conformance)

[plugin fix-source-map-support-global] [SOURCEMAP_BROKEN] Sourcemap is likely to be incorrect:
a plugin (fix-source-map-support-global) was used to transform files, but didn't generate a
sourcemap for the transformation.

Suggested fix: Update the fix-source-map-support-global plugin to return a sourcemap from its transform hook, or suppress the warning if sourcemaps aren't needed for this output.


5. PREFER_BUILTIN_FEATURE@rollup/plugin-inject (fdc3-conformance)

[PREFER_BUILTIN_FEATURE] Rolldown supports `inject` natively. Please refer
https://rolldown.rs/reference/ for more details. It is more performant than passing
`@rollup/plugin-inject` to plugins option.

Suggested fix: Replace @rollup/plugin-inject in the Vite config with Rolldown's built-in inject option (available in Vite 8 / Rolldown).


6. PLUGIN_TIMINGS — legacy plugin performance (fdc3-workbench)

[PLUGIN_TIMINGS] Your build spent 91% of 6.2s inside plugin hooks (5.6s).
  - vite:legacy-post-process renderChunk (87%, 5.4s, 2 calls)

The @vitejs/plugin-legacy renderChunk hook dominates build time. This is informational but worth noting if build speed becomes a concern — dropping legacy browser support (or targeting a higher baseline) would cut build time dramatically.


7. CSS injection entry file selection (fdc3-conformance)

[vite-plugin-css-injected-by-js] has identified "open-a.js" as one of the multiple output
files marked as "entry" to put the CSS injection code. However, if this is not the intended
file to add the CSS injection code, you can use the "jsAssetsFilterFunction" parameter to
specify the desired output file.

Suggested fix: Configure jsAssetsFilterFunction in vite-plugin-css-injected-by-js to target the correct entry (likely fdc3-compliance.js).


Summary table

# Warning Project Severity
1 configLoader: 'native' compat workbench, conformance Medium — will break in future Vite
2 COMMONJS_VARIABLE_IN_ESM workbench Medium — potential runtime bug
3 Chunk size > 500 kB workbench Low — dev tool only
4 SOURCEMAP_BROKEN conformance Low — test tool
5 PREFER_BUILTIN_FEATURE conformance Low — performance only
6 PLUGIN_TIMINGS (legacy) workbench Low — informational
7 CSS injection entry conformance Low — cosmetic

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions