Localhost Resolution Issues
This document details a common issue encountered during theme development when using LocalWP and how to resolve it.
Problem: ENOTFOUND Error During Build
Error Message:
❌ Error generating Critical CSS: RequestError: getaddrinfo ENOTFOUND wp-scratch.local
Cause:
The critical NPM package (used for generating critical CSS) fails to connect to the local development site. This occurs when Node.js cannot resolve the domain name (e.g., wp-scratch.local) because the site is not running, or the domain isn't correctly mapped to your local machine.
Explanation:
LocalWP typically uses a "localhost" router mode where each site runs on a unique port (e.g., http://localhost:10016). The critical package, by default, tries to resolve the site using the domain name specified during setup. When that fails, it throws an ENOTFOUND error.
Solution:
-
Identify Local Port: Determine the port number assigned to your site in LocalWP (e.g.,
10016). -
Update
generate-critical.mjs: Openscripts/generate-critical.mjsand modify theSITE_URLvariable to use thelocalhostaddress with the correct port:const SITE_URL = 'http://localhost:10016';Replace
10016with the actual port number assigned to your site. -
Restart Build: Run
npm run buildagain to generate thecritical.cssfile.
By updating the SITE_URL to the correct address, the critical package will be able to connect to your local site and generate the critical CSS as expected.