Separate CSS files using create-react-app code-splitting without ejecting

Question

I am using react-loadable to leverage code-splitting due to my application becoming too large not to do this. This is all working but the CSS is embedded in these new JavaScript chunks and then seemingly dynamically loaded into the page. I would like the CSS from each of these chunks to be in separate files rather than inside the JS file itself. Can I accomplish this without ejecting and modifying th Webpack config myself? I would really like to avoid that if possible.

EDIT: I've just ejected to see what the actual Webpack configuration is doing. The following comment confirms the issue I'm having but doesn't offer a solution:

Note the last sentence:

If you use code splitting, however, any async bundles will still use the "style" loader inside the async code so CSS from them won't be in the main CSS file.

Answer 1

I don't believe so , the purpose of create-react-app is to give you useful defaults for your project's build-configuration as well as to provide a base template for your application's project structure . The main idea is that create-react-app will allow you to focus on building out your application as opposed to worrying about setting up various build configurations, such as Webpack for bundling assets, babel for transpiling JavaScript code, linting, etc... create-react-app is a great "cookie-cutter" solution for most web applications, but it won't solve an edge case, such as custom performance need due to growth in your application's scale. Another analogy would be, it's kind of similar to working out or following a diet plan: you know basic compound movements, for a given set/rep range, along with eating healthy foods, within your macronutrients needs, will help you achieve your best physique possible.... but to get stage ready it's that minor 5-10% of individual customization that makes or breaks your chances at winning. This is why actors/actresses/athletes/etc.. all have dieticians, chefs, and strength coaches which personalize this basic template, for success, on a per individual level. Back to your issue, from the sounds of it you need to modify your MiniCssExtractPlugin plugin settings from within your webpack.config.js to chunk your CSS appropriately into individual files. Maybe you could try the following:

1. Backup your source code up on a version control system such as Github, Bitbucket, etc... As you will most certainly break things on this trial and error journey. Then branch off of master so as to not ruin your main branch with a working application.

Now you've two options that you could perhaps try:

1. All your build configuration settings are within your webpack.config.js , even when you use create-react-app . As this configuration is just encapsulated within the react-scripts node module . So maybe you could try editing this file directly, without ejecting: <base_path>/node_modules/react-scripts/config/webpack.config.js Although you need to be careful as to not break an existing configuration setting. At least this way if you ruin this file you can always just remove and reinstall react-scripts and be back to your initial configuration. This will also allow you to play around with your customizations in 'semi-safe' sandboxed environment.
2. Pull up your big boy pants and eject! Although this isn't most certainly what you wanted to hear.. you've customization needs, due to scale, that most people never need to account for so this requires a custom configuration. Similar to the exercise/diet plan analogy I gave earlier. If there is any saving grace remember there is no magic that create-react-app is providing rather it's just making useful defaults for your build configuration. By ejecting you still can use the application as before but now you're on you're own moving forward, which if you weren't using create-react-app this would be the case anyways.

Hopefully that helps, best of luck to you! If you figure out an elegant solution then please share with others, I hope to be proven wrong :)

Answer 2

I think at this point I can confirm that it's an issue the version of create-react-app that you used to create the project. It's not an issue with react-loadable it's the dynamic import() syntax and the lack of support for it in ExtractTextPlugin not finding chunks from that syntax.

I did a test on my machine with the new create-react-app . You can see that the bundle is created when loaded dynamically.

Here is a link to the issue on extract-text-webpack-plugin . This feature will not be added to this plugin (see last comments): https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/455

So what you need to do now is find a way to switch to MiniCssExtractPlugin , which I think is your only option at this point if you want to extract that CSS.

Edit: For future Google-ers. MiniCssExtractPlugin doesn't support Webpack 3, you need to upgrade to 4 entirely.