fix(dashboard): make RequestLoggerDetail loadable outside Next — CSS via globals.css + CJS/ESM interop (#11703 base-reds) - #12114
Merged
diegosouzapw merged 2 commits intoAug 30, 2026
Conversation
…via globals.css, CJS/ESM interop for react18-json-view Origin: #11703 (5684589) imported `react18-json-view/src/{style,dark}.css` at module level in RequestLoggerDetail(.sections).tsx and relied on the bundler's default-import interop. Next is fine with both, but every test that renders the component died on the release tip: - node:test / tsx: ERR_UNKNOWN_FILE_EXTENSION ".css" — request-log-detail-layout, request-log-detail-stream, request-logger-detail-copy-all, request-timeline-lane-allocation (4 unit shards red on every PR). - esbuild bundle-safety check (media-page-client-browser-bundle): cannot resolve the .css specifiers. - node ESM resolves the package's CJS `main` (no `exports` map), so the default import is the module namespace: "Element type is invalid … got: object". Fix at the source: the two stylesheets are @imported from src/app/globals.css (same as material-symbols / fumadocs), and the component unwraps `mod.default ?? mod` like redisQuotaStore/keytar already do. Also adds the 5 vi strings #11703 introduced (requestLogger.detail.{collapseAllLevels,collapseOneLevel, currentExpandLevel,expandOneLevel,expandAllLevels}) — vi has strict parity. Refs #11703
…omponents/jsonView.ts RequestLoggerDetail.tsx is frozen by check:file-size (1111 lines, cannot grow); the inline interop pushed it to 1118. One tiny module serves both components and keeps the CSS-import warning in a single place.
This was referenced Aug 30, 2026
muhamadgalihsaputra
pushed a commit
to niyatna/NiyatnaRoute
that referenced
this pull request
Sep 27, 2026
…via globals.css + CJS/ESM interop (diegosouzapw#11703 base-reds) (diegosouzapw#12114) * fix(dashboard): make RequestLoggerDetail loadable outside Next — CSS via globals.css, CJS/ESM interop for react18-json-view Origin: diegosouzapw#11703 (a4fd3d0) imported `react18-json-view/src/{style,dark}.css` at module level in RequestLoggerDetail(.sections).tsx and relied on the bundler's default-import interop. Next is fine with both, but every test that renders the component died on the release tip: - node:test / tsx: ERR_UNKNOWN_FILE_EXTENSION ".css" — request-log-detail-layout, request-log-detail-stream, request-logger-detail-copy-all, request-timeline-lane-allocation (4 unit shards red on every PR). - esbuild bundle-safety check (media-page-client-browser-bundle): cannot resolve the .css specifiers. - node ESM resolves the package's CJS `main` (no `exports` map), so the default import is the module namespace: "Element type is invalid … got: object". Fix at the source: the two stylesheets are @imported from src/app/globals.css (same as material-symbols / fumadocs), and the component unwraps `mod.default ?? mod` like redisQuotaStore/keytar already do. Also adds the 5 vi strings diegosouzapw#11703 introduced (requestLogger.detail.{collapseAllLevels,collapseOneLevel, currentExpandLevel,expandOneLevel,expandAllLevels}) — vi has strict parity. Refs diegosouzapw#11703 * refactor(dashboard): move the react18-json-view interop into shared/components/jsonView.ts RequestLoggerDetail.tsx is frozen by check:file-size (1111 lines, cannot grow); the inline interop pushed it to 1118. One tiny module serves both components and keeps the CSS-import warning in a single place.
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
1 participant
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.
Origin
#11703 (
5684589ce7, collapsible JSON tree viewer) importsreact18-json-view/src/{style,dark}.cssat module level inRequestLoggerDetail(.sections).tsxand uses a bare default import ofreact18-json-view. Next handles both; nothing else does — so on therelease/v3.8.51tip every test that renders the component dies, which is why all 4 unit shards are red on every open PR (e.g. #12106, #12099, #12081):request-log-detail-{layout,stream},request-logger-detail-copy-all,request-timeline-lane-allocation—ERR_UNKNOWN_FILE_EXTENSION ".css"media-page-client-browser-bundle— esbuild cannot resolve the.cssspecifiersElement type is invalid … got: objectonce the CSS is out of the waymain(noexportsmap) → default import is the module namespacei18n-vi-completeness×3requestLogger.detail.*keys withoutvi(strict parity)Fix (at the source, not in the tests)
src/app/globals.css:@importthe two stylesheets there (same pattern asmaterial-symbols/fumadocs); the components no longer import CSS.const JsonView = (mod.default ?? mod)— the interop already used byredisQuotaStore/keytar-reader.vi.json: the 5 strings.Validation
payload-section-collapsible-json+timestamp-titles→ 8/8.node_modulesneededreact18-json-viewinstalled (npm install --no-save) — CI'snpm cialready has it (the lockfile is fine).release/v3.8.51tip (see the merge-batch audit in the session report) and none touches this PR's files.