CSS from SFC's is not supplied on SSR with the initial response

Open
#91 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript, webpack
Domain
build-system, frontend

Research direction

Start with the linked CodeSandbox, especially src/components/TestComponent.vue, quasar.conf.js, and routes.js. Reproduce the SSR response with JavaScript disabled, then inspect the webpack plugin behavior around the lazy-loaded Index.vue route. Done means the SFC CSS appears in the initial SSR response without adding Index.vue to the main bundle.

Written by the indexing model from the issue text.

Description

I have been breaking my head the past 2 hours on a problem which I cannot wrap my head round. When I use unplugin-auto-import with Quasar (webpack) the css that I define in <style> tags inside SFC child components is no longer supplied with the SSR initial response.

I have no idea why but if I remove the unplugin-auto-import plugin from webpack, things work normally again. Luckely I was able to create a reproducing example, see here:
https://codesandbox.io/s/fragrant-meadow-8g5dy?file=/src/components/TestComponent.vue

To see the problem:

  • Open the browser from the sandbox in a new tab
  • In this new tab, disable javascript (In chrome devtools you can do Ctrl + shift + p and type disable and you will see a Disable javascript command
  • Reload the page, now the div in there with text This element should be red is not red
  • If you inspect the source (Ctrl + u) you can see that there is no css imported

To make it work again:

  • Comment out the lines in quasar.conf.js that add the plugin
  • Restart the dev server and follow the steps above to see the difference.

What also makes it work again:

  • Change the routes.js file, add import Index from 'pages/Index.vue at the top.
  • Change component: () => import('pages/Index.vue') to component: Index

But this is not really an option because that would include Index in the main bundle and I want to be able to split that page into a seperate bundle, only loaded when required.

Do you have any idea what could be the problem here? I cannot see a logical reason for why this might happen but I don't have a knowledge of the plugin's internals and how it does what it does.

Dominant language
TypeScript
Stars
3.8k
Forks
217
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from unplugin/unplugin-auto-import

All issues in unplugin/unplugin-auto-import

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.