Support Node 24, fix plyr SSR and dart-sass build - #3
Open
stuible wants to merge 1 commit into
Open
Conversation
Pin Node via .nvmrc and fix the build failures that surfaced along the way. Verified: `npm run dev` compiles both bundles clean and serves HTTP 200; `npm run generate` exits 0 with zero errors. - .nvmrc: pin Node 24 (v24.18.1) - package.json: override file-loader/url-loader's nested loader-utils to ^2.0.4, which falls back to md5 when md4 is unavailable. Without this, `generate` fails on Node >=17 with OpenSSL 3 "error:0308010C digital envelope routines::unsupported". This is the only genuinely Node-version-related fix here. - package.json: add autoprefixer. vuesax ships its own postcss.config.js that requires it, and it is no longer hoisted on a fresh install. - VPlyr.vue: import plyr lazily in mounted() instead of at module scope. plyr touches `document` on import, which broke SSR on every page. This also clears 31 pre-existing "render function or template not defined in component: v-plyr" errors during generate, so /watch pages now actually prerender instead of falling back to client-side rendering. - nuxt.config.js: transpile plyr's dist bundle, which uses nullish coalescing that webpack 4 cannot parse. Safe only in combination with the lazy import above, which keeps plyr out of the server bundle. - layout.scss: use `$container-padding * 0.5` rather than `@use 'sass:math'` + math.div(). styleResources prepends variables ahead of the @use, and @use must come first in a file. Note: plyr stays on 3.7.8. 3.8.4 drops the top-level main/browser fields for an exports map, which webpack 4 does not support, so the module stops resolving entirely. The Jenkinsfile still pins Node 14 and now disagrees with .nvmrc. Claude-Session: https://claude.ai/code/session_01YYw1jCDqP22swZPmSqcUtn
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.
Pins the project to Node 24 and fixes the build failures that surfaced along the way.
Verified:
npm run devcompiles both bundles clean and serves HTTP 200.npm run generateexits 0 with zero errors.Changes
.nvmrc(new)24→ resolves to v24.18.1package.jsonfile-loader/url-loader's nestedloader-utilsto^2.0.4package.jsonautoprefixercomponents/general/VPlyr.vuemounted()nuxt.config.jstranspileplyr's dist bundleassets/scss/layout.scss$container-padding * 0.5instead of@use 'sass:math'Why
loader-utils override — the only genuinely Node-version-related fix.
generatefails on Node ≥17 with the OpenSSL 3 errorerror:0308010C: digital envelope routines::unsupported, because the nestedloader-utils@2.0.0hashes with md4. 2.0.4+ falls back to md5.autoprefixer — vuesax ships its own
postcss.config.jsthat requires it, and it is no longer hoisted on a fresh install.plyr lazy import — plyr touches
documentat module scope, so importing it eagerly broke SSR on every page. This also clears 31 pre-existingrender function or template not defined in component: v-plyrerrors during generate, so/watchpages now genuinely prerender instead of silently falling back to client-side rendering. plyr was already only used insidemounted().transpile — plyr's dist uses nullish coalescing, which webpack 4 can't parse. This is safe only in combination with the lazy import; on its own it pulls plyr into the server bundle and 500s the site.
layout.scss —
styleResourcesprepends variables ahead of the@use, and@usemust come first in a file.Notes
main/browserfields for anexportsmap, which webpack 4 does not support, so the module stops resolving entirely.package-lock.jsondiff is dependency-tree churn from a clean reinstall;lockfileVersionis unchanged at 2.Jenkinsfilestill pins Node 14 and now disagrees with.nvmrc. Left alone deliberately — changing CI is a separate call.https://claude.ai/code/session_01YYw1jCDqP22swZPmSqcUtn