Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

fix(nuxt): don't inline styles for per-request ssr: false #8106

Merged
merged 4 commits into from
Oct 12, 2022

Conversation

Alex--C
Copy link
Contributor

@Alex--C Alex--C commented Oct 11, 2022

πŸ”— Linked issue

resolves nuxt/nuxt#15124
#7580

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

Currently, if SSR is enabled during build, the renderer tries to inline styles if process.env.NUXT_INLINE_STYLES is true.
It does not take the current request's ssrContext.noSSR into account.

This leads to an error if SSR is disabled dynamically (e.g. using the x-nuxt-no-ssr header in a server middleware):

[nuxt] [request error] [unhandled] [500] globalThis.__buildAssetsURL is not a function
  at ./.output/server/chunks/app/styles.mjs:7:276
  at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async renderInlineStyles (./.output/server/chunks/handlers/renderer.mjs:453:20)
  at async ./.output/server/chunks/handlers/renderer.mjs:386:25
  at async ./.output/server/chunks/handlers/renderer.mjs:30:22
  at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)

My change here disables style inlining if ssrContext.noSSR is true.

Resolves nuxt/nuxt#15124 and #7580 .

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@codesandbox
Copy link

codesandbox bot commented Oct 11, 2022

CodeSandbox logoCodeSandbox logoΒ  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@netlify
Copy link

netlify bot commented Oct 11, 2022

βœ… Deploy Preview for nuxt3-docs canceled.

Name Link
πŸ”¨ Latest commit d63bbdc
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/6345f9052cf2a00009fb5dc7

@atinux atinux requested a review from danielroe October 11, 2022 12:06
@danielroe danielroe mentioned this pull request Oct 11, 2022
@danielroe
Copy link
Member

Ideally we would still render global inline styles with ssr: false. At the moment, the way we import asset URLs is with globalThis.__buildAssetsURL which is set here:

'globalThis.__buildAssetsURL = buildAssetsURL',
'globalThis.__publicAssetsURL = publicAssetsURL'

We could either set this manually in getSPARenderer or (better) somehow import paths.mjs in our emitted styles.mjs file.

Thoughts welcome.

@Alex--C
Copy link
Contributor Author

Alex--C commented Oct 12, 2022

Ideally we would still render global inline styles with ssr: false.

Wouldn't style inlining for SPA be a completely new feature? From what I understand, inlineSSRStyles is currently always false if the app is built without SSR enabled. This PR only addresses the issue that happens when the app is built with SSR enabled but then disabled during runtime.

@danielroe
Copy link
Member

Oh yes, you're quite right. I do think it would be a nice feature to inline default styles with a SPA, but no changes needed in this PR 😊

@danielroe danielroe changed the title fix(nuxt): no inline styles for client side rendering fix(nuxt): don't inline styles for per-request ssr: false Oct 12, 2022
@danielroe danielroe merged commit 6ef6eae into nuxt:main Oct 12, 2022
@danielroe danielroe mentioned this pull request Oct 18, 2022
7 tasks
@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

x-nuxt-no-ssr header: globalThis.__buildAssetsURL is not a function
3 participants