finos / finos/FDC3

Investigate and fix vite build warnings

Open
#2,115 0 comments 0 reactions 0 assignees View on GitHub
bug good first issue javascript project infrastructure
Dominant language
TypeScript
Stars
270
Forks
193
Avg merge
3d 4h
Merged PRs (30d)
32

Description

## 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_BROKEN` — `fix-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 |

Contributor guide

Open the contributing guide

Research direction

Start by running `npm run build` from the repository root and compare warnings across the fdc3-workbench and fdc3-conformance workspaces. Read each workspace's `vite.config.ts` and `package.json`, then inspect the referenced dependencies and plugins. Done means the actionable Vite warnings are resolved or deliberately documented, with both workspace builds passing.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.