CSS not loaded when using import() to load a React component

[peeke]

I have a use case, where I want to separate a part of the codebase from the bundle. I can effectively do so by using

const VacatureMap = React.lazy(() => import('/components/vacature-map/VacatureMap'))

...

{mapboxSupported && <React.Suspense fallback={<Spinner />}>
  <VacatureMap />
</React.Suspense>}

This works, however the styles from VacatureMap.css are not appended to the document.

Possibly related to css-modules/css-modules#232

Some context: I'm having trouble compiling mapbox-gl with babel so it doesn't break IE11 (or some other older browsers). I have successfully compiled it with babel, but that takes the build in Jenkins from 3 to 17 mins, just to show a 'Not supported' notice. I'd rather import the included supported check, which works without compiling with babel, then only load the map when there's support.

[EECOLOR]

Yeah, this is a tricky problem. The @kaliber/build framework makes the assumption that all CSS is required both on server and client. This use case was never needed before. Reason for this is that we usually do not lazy load our own components.

For now I see two workarounds:

• Do not import your own component (the one that references CSS) and only import the library component
• Add a import stylesheet from '@kaliber/build/lib/stylesheet' and {stylesheet} to your imported component

The last option is kinda tricky because it causes the component to assume how the parent is using it. So I think it's best if we discuss this before we implement it.

[EECOLOR]

In some cases we now use the following:

async function loadStyleSheets(chunkName) {
  const response = await fetch('/css-manifest.json')
  const result = await response.json()
  return result[chunkName].map(filename => `${__webpack_public_path__}${filename}`)
}

and then render them;

stylesheets.map(stylesheet =>
  <link href={stylesheet} rel='stylesheet' type='text/css' key={stylesheet} />
)