Is there a way to get @loadable/component working under Vite with SSR?

[nellh]

I've got a few components that are dynamically loaded with @loadable/component like so:

const Faq = loadable(
  () => import(/* webpackChunkName: 'Faq' */ './faq/faq.jsx'),
  { ssr: true },
)

This seems to work fine when run on the client. With SSR - it doesn't get rendered. I tried using:

import ReactDOMServer from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const extractor = new ChunkExtractor()
ReactDOMServer.renderToString(extractor.collectChunks(<App />))

But this depends on @loadable/webpack-plugin to work. Is there a way to achieve something similar for dynamic react components under Vite that's compatible with SSR?

[sanyuan0704]

It is a problem.

[polichan]

Did you solve the problem ? I have the same issue too and I have no idea how to fix it. It seems @loadable/component only works under webpack.

[tobiasfrei]

I will not change until loadable is solved with vite

[smartcrash]

Hi, maybe you could workaround it using some thing like this:

import { lazy, Suspense } from 'react'

const loadable = (factory: Parameters<typeof lazy>[0]) => () => {
  const Component = lazy(factory);

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Component />
    </Suspense>
  );
};

const Login = loadable(() => import("./pages/login"));

function App() {
  return (
    <Router>
        <Routes>
            <Route path={'/login'} element={<Login />}
        </Routes>
    </Router>
  );
}

[YPCrumble]

Is this possibly a replacement for the code-splitting functionality of loadable-components? https://github.com/sanyuan0704/vite-plugin-chunk-split

[mxvsh]

any fix?

[seniordev-ca]

Can I use @loadable/component's Full dynamic import feature with Vite?

This works for me:

const Icon = loadable.lib(() => import(`react-icons/fa`))

but this doesn't:

const Icon = loadable.lib(() => import(`react-icons/${'fa'}`))

[childrentime]

React.createElement(loadable(() => import(../Test.tsx))

[sapphi-red]

loadable-components only supports Webpack and therefore loadable-components cannot be used with Vite.
gregberge/loadable-components#833 (comment)
gregberge/loadable-components#907 (comment)

[recover758126]

so, any way to solve this ?

[YPCrumble]

Are we sure that loadable-components is actually necessary with Vite? Per this issue it seems that simply using React.lazy and dynamic imports might be sufficient, meaning that loadable-components isn't necessary anymore. See for instance https://vitejs.dev/guide/features#async-chunk-loading-optimization and https://rollupjs.org/tutorial/#code-splitting

[recover758126]

I think loadable-components is necessary for some old projects that contains lodable-components code . It is difficult to migrate.

[HashemKhalifa]

also if you are using renderToString it's not supported by lazy https://react.dev/reference/react-dom/server/renderToString#when-a-component-suspends-the-html-always-contains-a-fallback

[wille]

React.lazy works in Vite but it has some drawbacks if using it as a replacement for loadable-components on server rendered pages.

With React.lazy on server rendered pages, the stylesheets for the lazy modules will not be in the initial HTML, causing a Flash Of Unstyled Content (FOUC) on the page, and there will be no preloading of JS modules adding some significant startup time to your app.

The vite-preload plugin solves this https://github.com/wille/vite-preload?tab=readme-ov-file#migrating-from-loadable-components