Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FOUC occurs on SSR when deployed to vercel and dynamically importing a component #1872

Closed
mattjennings opened this issue Jul 10, 2021 · 1 comment

Comments

@mattjennings
Copy link

Describe the bug
When dynamically importing a component through load and passing it to the page through props, there is a flicker of unstyled content when that page is SSR'd.

Logs
no logs to show

To Reproduce

Repo: https://github.com/mattjennings/sveltekit-vercel-FOUC
Live URL: https://svelte-bug.vercel.app

<!-- $lib/Button.svelte -->
<button class="button">button</button>

<style>
  .button {
    background: blue;
  }
</style>
<!-- routes/index.svelte -->
<script context="module">
  export async function load() {
    const Button = await import("$lib/Button.svelte");

    return {
      props: {
        component: Button.default,
      },
    };
  }
</script>

<script>
  export let component;
</script>

<svelte:component this={component} />

Deploy to vercel, load the page SSR and the FOUC will occur. It does not happen when running in dev, previewing locally, or when client-side navigating to the page on the deployment.

Expected behavior
FOUC should not occur

Information about your SvelteKit Installation:

Diagnostics System: OS: macOS 11.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 231.64 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm Browsers: Chrome: 91.0.4472.114 Safari: 14.1.1 npmPackages: @sveltejs/adapter-vercel: ^1.0.0-next.24 => 1.0.0-next.24 @sveltejs/kit: next => 1.0.0-next.123 svelte: ^3.34.0 => 3.38.3

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of SvelteKit entirely?

Annoying

Additional context
I'm not sure how long this has been happening. I have an old deployment of an affected project using @sveltejs/kit@1.0.0-next.113 and @sveltejs/adapter-vercel@1.0.0-next.22 that it does not happen in. However, a new project with those versions still has the problem.

@benmccann
Copy link
Member

Sounds like a duplicate of #967

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants