How to Fix Webpack That Hangs Before Compilation (PWA Studio Issue)

In the following article, we provide tips on how to bring Magento PWA Studio back to life when a Javascript Webpack hangs before launching compilation. The problem only affects developers who work with the native PWA tools of Magento 2. If you are looking for more useful tips, check our Magento 2 Cookbook. Now, let’s focus on the reason why Webpack hangs without even starting compilation and on how to bring PWA Studio back to life.

The Issue

Let’s assume that you’ve just set up a PWA Studio storefront with a local Magento instance and try to run a build or watch command. What would you normally expect? 

Usually, the former generates the build artifacts for the storefront. As for the latter, it starts the PWA storefront.

However, actual results don’t meet these expectations. Either the build or watch command hangs without completion. At the same time, no errors are displayed. So, how to fix the issue and continue your work with the PWA project?

The Solutions

First of all, it is necessary to know whether you use the latest version of the pwa-buildpack or not. Follow these steps:

• Open the pwa-buildpack page on GitHub.
• Scroll down to the package.json filename listing. 
• Check the version in front of it. 

If you are using an older version of the pwa–buildpack project, it may be the source of the issue. Your Webpack hangs without starting compilation.

Luckily, the solution is quite apparent. You need to update your project. Use the following command:

Besides, it is necessary to get a current OpenSSL version. Check yours via the following command:

It is recommended to have a version that is not older than 1.0. It should also be LibreSSL 2 if you use OSX High Sierra.

You can update OpenSSL as follows:

• Use Homebrew for OSX;
• Use Chocolatey for Windows;
• Use your distribution’s package manager for Linux.

For further information, follow this link: PWA Studio: Webpack hangs before beginning compilation.