Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamically imported components gets their css delayed

See original GitHub issue

Describe the bug When dynamically importing components like: await import('my-component.svelte').default the component gets server side rendered, but the css gets imported async with a preload helper, thus the code flickers until the css is loaded.

To Reproduce I have a repro repo here with two links to a [slug] page where the component gets chosen depending on the slug (blue or red counter): https://github.com/rinti/svelte-kit-dynamic-import As you can see when building and starting production server, the html gets correctly rendered, but the css flickers.

Expected behavior The relevant css should be inlined in <link> tags

The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 20.92 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.1 - ~/.volta/tools/image/node/12.22.1/bin/node
    npm: 6.14.12 - ~/.volta/tools/image/node/12.22.1/bin/npm
  Browsers:
    Firefox Developer Edition: 88.0
    Safari: 14.0.2
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.71
    svelte: ^3.29.0 => 3.37.0
    vite: ^2.1.0 => 2.1.5

Using node adapter

Severity I don’t know how common my use case is, but for my use case it’s pretty severe.

This might be a duplicate of #962, if so you can close this issue.

Issue Analytics

State:
Created 2 years ago
Reactions:6
Comments:12 (4 by maintainers)

Top GitHub Comments

1reaction

f-elixcommented, Jul 6, 2022

As of v360, this problem is now fixed it seems! Thanks a lot Rich 😃

1reaction

f-elixcommented, May 26, 2022

I can confirm this is still happening, for me both in dev and production.

All the css related to a dynamically imported component is imported via a preload-helper, which causes some styles to appear only when js loads. It’s very easy to reproduce by disabling the js on the page, in which preload-helper won’t run and the css won’t get loaded, even though the component appears just fine.

I can work around this by not using the <style> block in dynamically imported components and putting the styles in a global stylesheet, but it would be nice to have this fixed 😃

Top Results From Across the Web

dynamically imported css file getting not getting deferred when ...

I have this code in a react component: export const Dashboard: React.FC = () => { useEffect( ...

Dynamically Importing Components with React.lazy

With React.lazy, you can dynamically import components at run time to ... assets it imported (e.g., CSS or images) will also be deferred....

Advanced Features: Dynamic Import - Next.js

Dynamically import JavaScript modules and React Components and split your code ... components can delay hydration until the Suspense boundary is resolved.

Dynamic imports and code splitting with Next.js

Dynamic imports, also known as code splitting, refers to the practice of dividing bundles of JavaScript code into smaller chunks, which are then ......

Code splitting with dynamic imports in Next.js - web.dev

Next.js supports dynamic import() , which allows you to import JavaScript modules (including React components) dynamically and load each ...