Can you make it more clear how to use this?

Hey, I’m having an issue where I’m using extract-text-webpack-plugin with codesplitting (currently react-loadable):

const LoadableFeatures = Loadable({
    loader: () => import('../components/features'),
    loading: Loading,
});

and this is using syntax-dynamic-import. I’m trying to figure out what combination of things I need to do to use your libraries since they seem to be solving the thing I want.

Do I need react-universal-component or just babel-plugin-universal-import? How do I dynamically load a component that has its own CSS and have that CSS chunked?

I’ve tried just using react-universal-component by itself:

const LoadablePricing = universal(() => import('../components/pricing'));

and the CSS doesn’t get extracted to its own chunk.

[faceyspacey]

For the second point you usually don’t have to have them both, but if it’s not working try adding the additional plugin.

Since you aren’t doing SSR there is another plugin by one of our users mentioned on the extract-css-chunks readme for SPAs that you need instead so dual import of both js plus CSS works.

[sontek]

The sass thing was my fault, I’m down to just #1. The CSS from the async components aren’t loaded on the initial requested, they are loaded after if they aren’t on the initial request.