Fix SRI blocking Google Fonts and Chart.js/D3.js globals not registered#421
Merged
Fix SRI blocking Google Fonts and Chart.js/D3.js globals not registered#421
Conversation
…bals - Add skipResources to vite-plugin-sri-gen to exclude Google Fonts URLs that don't support CORS for SRI verification - Create register-globals.ts to import Chart.js and D3.js and assign to globalThis, since dashboard modules access them via (globalThis).Chart and (globalThis).d3 - Update main.ts and cia-entry.ts to use register-globals instead of side-effect imports that don't set globals Co-authored-by: pethers <[email protected]>
…bals Co-authored-by: pethers <[email protected]>
Co-authored-by: pethers <[email protected]>
Copilot
AI
changed the title
[WIP] Fix Riksdagsmonitor charts not loading on dashboard
Fix SRI blocking Google Fonts and Chart.js/D3.js globals not registered
Feb 21, 2026
github-actions
bot
added
javascript
Contributor
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes two independent bugs that broke Chart.js and D3.js visualizations on index and dashboard pages:
- SRI Configuration Issue:
vite-plugin-sri-genwas adding integrity hashes to Google Fonts links, causing browsers to block them (Google Fonts don't support CORS for SRI verification) - Global Registration Issue: Side-effect imports (
import 'chart.js/auto',import 'd3') don't assign toglobalThis, but dashboard modules read fromglobalThis
Changes:
- Added
skipResourcesto exclude Google Fonts URLs from SRI generation (security still enforced on bundled assets) - Created
register-globals.tsto import Chart.js/D3.js as ES modules and explicitly assign toglobalThis - Updated entry points (
main.ts,cia-entry.ts) to importregister-globals.tsbefore dashboard modules load
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Added skipResources array to vite-plugin-sri-gen config to exclude Google Fonts URLs from SRI |
| src/browser/shared/register-globals.ts | New module that imports Chart.js and D3.js as ES modules and assigns to globalThis |
| src/browser/main.ts | Replaced side-effect imports with register-globals.js import |
| src/browser/cia-entry.ts | Replaced side-effect imports with register-globals.js import |
| sitemap.xml | Generated file with timestamp updates only |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Charts broken on index and dashboard pages due to two independent issues:
vite-plugin-sri-genadding integrity hashes to Google Fonts links (which don't support CORS for SRI verification, causing browser to block them), and ES module side-effect imports (import 'chart.js/auto',import 'd3') not assigning toglobalThiswhile all dashboard modules read from it.SRI fix
skipResourcesto exclude external Google Fonts URLs from SRI generationGlobals fix
register-globals.tsmodule imports Chart.js/D3.js and assigns toglobalThismain.ts,cia-entry.ts) import this before dashboard modules, ensuring globals are set before module-levelconst d3 = (globalThis as any).d3executes in dependency orderBefore
After (22 Chart.js instances, 6 D3.js SVGs)
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.