2 min read

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:

  1. Identify Local Port: Determine the port number assigned to your site in LocalWP (e.g., 10016).

  2. Update generate-critical.mjs: Open scripts/generate-critical.mjs and modify the SITE_URL variable to use the localhost address with the correct port:

    const SITE_URL = 'http://localhost:10016';

    Replace 10016 with the actual port number assigned to your site.

  3. Restart Build: Run npm run build again to generate the critical.css file.

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.