Resolving Webpack Stuck at Compiling When Using CRACO with Create React App

Troubleshooting and fixing the `Webpack stuck at compiling` issue in Create React App using CRACO. Learn how to restore your development flow seamlessly.
---
This video is based on the question https://stackoverflow.com/q/74868460/ asked by the user 'Alexis Lapeze' ( https://stackoverflow.com/u/13096988/ ) and on the answer https://stackoverflow.com/a/74998490/ provided by the user 'Alexis Lapeze' ( https://stackoverflow.com/u/13096988/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Webpack stuck at compiling

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving Webpack Stuck at Compiling When Using CRACO with Create React App

If you're developing a React application with Create React App (CRA) and you’re using CRACO to customize the Webpack configuration, you might encounter a frustrating problem where Webpack gets stuck at compiling. This can be particularly vexing when you're trying to maintain a smooth development workflow. In this post, we will identify the root cause of this issue and provide a detailed solution.

Understanding the Problem

The context of the problem is that while the application compiles successfully with craco start, it fails to recompile changes in your code effectively, displaying a message stating it's "compiling..." indefinitely. This can halt development progress and create confusion, especially when the initial compilation is successful.

Common Scenarios Leading to this Issue:

Altering configuration files without understanding their dependencies.

Removing essential settings from package.json, such as browserslist.

Solution Overview

After thorough research, it was discovered that a specific misconfiguration could cause Webpack to get stuck at this stage – the absence of the browserslist key in the package.json file. Below we’ll guide you through restoring this configuration properly.

Step 1: Review Your craco.config.js

First, ensure your craco.config.js file is correctly set up. The good news is that the configuration you provided seems correct based on your requirement for micro and standalone app entry points. Here's a glance at it for reference:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Restore the browserslist in package.json

The crucial fix is to add back the browserslist key into your package.json. Below is a sample configuration to help you restore it effectively:

[[See Video to Reveal this Text or Code Snippet]]

What Does the browserslist Key Do?

The browserslist key specifies which browsers your application should support. It's essential for tools like Babel and Autoprefixer to ensure that your code runs smoothly across the intended environments.

Final Thoughts

By following the steps to restore the browserslist key in your package.json, you should be able to resolve the issue of Webpack getting stuck at compiling. This fix not only helps in reasserting your development settings but also enhances the compatibility of your application across different browsers.

If you try these steps and the issue persists, consider reviewing other configurations or dependencies in your project. Happy coding!