ScreenshotNeo

BlogHow-to

How to Fix Yeoman React-Webpack Project Creation When PhantomJS Is Incompatible

Diagnose whether Yeoman, npm installation, or Karma is failing, then apply the compatible fix without guessing at PhantomJS versions.

By the ScreenshotNeo team1 October 20268 min read

There is no single “PhantomJS incompatible” fix. First identify where the process fails: Yeoman scaffolding, npm dependency installation, or Karma browser startup. Each phase has a different cause and remedy.

The command and package name matter. One documented scaffold is generator-react-webpack-scaffold, invoked as yo react-webpack-scaffold. Do not assume it is the generator in your project. Confirm the package, versions, operating system, Node.js version, npm version, and complete error output before changing dependencies.

1. Classify the failure before changing code

What you observe Likely phase Inspect first
No files are generated Yeoman or generator execution Invocation, generator package, Yeoman and Node.js versions
Files exist, but npm install fails Dependency installation package.json, lockfile, PhantomJS install script and binary download
Install completes, but tests cannot find or launch a browser Karma configuration karma.conf.js, launcher plugins and browser name

Record the first error rather than only the final stack trace. A browser-launch error cannot be repaired with an npm install flag, and an install-script failure cannot be repaired by editing browsers in Karma.

2. Capture a reproducible diagnostic snapshot

Run these commands from the project directory and save their output:

node --version
npm --version
yo --version
npm ls --depth=0
npm config get registry
uname -a

# Identify the generator and its installed version
npm ls -g --depth=0 | grep -i generator
npm list --depth=0 | grep -Ei 'phantom|karma|launcher'

# Search manifests, lockfiles and Karma configuration
rg -n -i "phantomjs|karma-phantomjs-launcher|chromeheadless|browsers|customLaunchers" package.json package-lock.json yarn.lock karma.conf.* .

On Windows, use systeminfo instead of uname -a. Include the exact Yeoman command, full error text, generator name and version, Node.js and npm versions, operating system, and whether files were created.

3. Confirm which generator you actually invoked

“React-Webpack generator” is not a unique package name. Inspect the command history and package metadata:

history | grep -E '(^| )yo '
npm root -g
npm view generator-react-webpack-scaffold name version repository.url
npm ls -g generator-react-webpack-scaffold --depth=0

If your command was yo react-webpack-scaffold, compare the installed package with the generator’s README and issue tracker. If it was another command, use that generator’s package name and documentation. The surfaced scaffold documents React/Babel, Webpack, and a Karma/Mocha/Chai test stack; those facts do not prove that PhantomJS caused your failure.

4. If Yeoman fails before project creation

When the command stops before generating a usable project, focus on Yeoman and the generator rather than PhantomJS. Check:

  1. That the generator name in the command matches an installed package.
  2. That the generator version supports your Node.js and npm versions according to its own documentation.
  3. Whether the error names a generator file, template, prompt, or post-generation hook.
  4. Whether a partially created directory is being reused. Move it aside and rerun in a clean directory so old files do not affect the result.
mkdir yeoman-repro
cd yeoman-repro
yo <your-generator-command> 2>&1 | tee yeoman.log

Do not add PhantomJS flags when the stack trace never reaches dependency installation or Karma. A confirmed generator defect belongs in that generator’s issue tracker. Include the diagnostic snapshot and the complete log.

5. If npm installation fails while handling PhantomJS

First inspect the dependency declaration and lockfile:

node -e "const p=require('./package.json'); console.log({dependencies:p.dependencies, devDependencies:p.devDependencies, scripts:p.scripts})"
rg -n -i "phantomjs|phantom|install|download" package.json package-lock.json yarn.lock node_modules 2>/dev/null

Distinguish these cases:

  • Install script or binary download error: the PhantomJS package is executing a download or setup step. Check the package’s own documentation, network/proxy settings, and compatibility with the installed Node.js and npm versions.
  • Missing package or unresolved version: the lockfile or registry resolution is the problem. Check the exact package name, registry configuration, and whether the lockfile was generated by a different package manager.
  • Permission or filesystem error: correct the project directory and cache permissions, then retry from a clean install after preserving the log.

A historical npm report describes PhantomJS installation failures in an older Yeoman/Karma setup. Treat that report as context only; it does not establish the cause or a current Node.js downgrade for your project.

Do not use --ignore-scripts as a general repair. It can leave PhantomJS or another dependency only partially installed, producing a later and less clear failure. Use it only when the dependency maintainer’s documentation explicitly describes a supported workflow and you understand which runtime will provide the required binary.

6. If Karma cannot launch PhantomJS

Once dependencies install successfully, inspect karma.conf.js (or the configuration file named by your test script):

module.exports = function (config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: ['src/**/*.js', 'test/**/*.js'],
    reporters: ['progress'],
    browsers: ['PhantomJS'],
    singleRun: true
  });
};

Karma’s configuration treats the browser name and launcher plugin as a pair. A PhantomJS entry requires the PhantomJS launcher package; a ChromeHeadless entry requires the corresponding Chrome launcher package. Verify the versions already in your project before changing either one.

Option A: keep PhantomJS for a project that depends on it

  1. Confirm that karma-phantomjs-launcher is installed in the project.
  2. Confirm that browsers: ['PhantomJS'] exactly matches the launcher name.
  3. Run Karma with verbose output and preserve the first browser error.
npm list karma karma-phantomjs-launcher
npx karma start karma.conf.js --single-run --log-level debug

Option B: use ChromeHeadless when the suite permits it

Karma documents both PhantomJS and ChromeHeadless choices. Switching browsers requires the matching launcher and a compatible browser installation; it does not repair a Yeoman or npm scaffolding failure.

npm install --save-dev karma-chrome-launcher
module.exports = function (config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: ['src/**/*.js', 'test/**/*.js'],
    reporters: ['progress'],
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};

Before adopting this change, check whether tests rely on PhantomJS-specific behavior, APIs, user-agent detection, rendering quirks, or a custom launcher. Run the complete suite and review failures individually.

7. Cleanly reproduce the project after diagnosis

After correcting the phase-specific issue, reproduce from a clean checkout or directory. Preserve the lockfile that belongs to the chosen package manager.

# npm project
rm -rf node_modules
npm ci
npm test

# If there is no lockfile, resolve deliberately and then commit it
npm install
npm test

Do not delete the lockfile as a first response. It is evidence of the dependency graph and may be required to reproduce the original failure.

8. Troubleshooting common errors

Error pattern Cause to verify Fix
command not found: yo Yeoman is not installed or is outside PATH Install Yeoman using the method documented for your environment, then verify yo --version.
Did not find any executable or browser not found Karma browser name has no installed launcher Install the matching launcher and make the browsers entry match its documented name.
Cannot find module 'karma-phantomjs-launcher' The configuration names PhantomJS but the launcher is absent Inspect the manifest and install the version supported by the project, or use a documented alternative launcher.
PhantomJS download or install-script failure Dependency setup, network, proxy, runtime or package compatibility Read the dependency’s install output, check Node.js/npm and proxy settings, and compare package versions before changing them.
Project files are created but npm exits nonzero Generation completed; post-generation dependency install failed Separate the generated files from the install log and diagnose the dependency named in the first error.
ChromeHeadless cannot start Chrome is unavailable or launcher configuration is incompatible Verify the browser installation, launcher package, and project-specific Karma versions.
Tests pass locally but fail in CI Different Node.js, browser, environment variables, sandbox or filesystem Compare version snapshots and CI logs; use the same lockfile and explicitly configure the CI browser.

9. Performance, reliability and maintenance

  • Keep installs reproducible: commit the lockfile and use npm ci in automation.
  • Separate phases in CI: log generator execution, dependency installation and Karma startup as separate steps so failures remain attributable.
  • Prefer maintained components: compare the maintenance status of the named generator, PhantomJS launcher and replacement browser before changing test infrastructure.
  • Measure before migrating: compare runtime, rendering differences and flaky tests on a representative suite. The available sources do not establish that PhantomJS and ChromeHeadless behave identically.
  • Preserve failure evidence: retain the first error, package manager output and environment versions for bug reports.

10. When to report the issue

Report a confirmed generator-specific failure to the generator maintainer. Report a confirmed Karma or launcher failure to the relevant build-tool or launcher tracker. Include:

  • Exact command and working directory
  • Full first error and stack trace
  • Generator package and version
  • Node.js, npm, Yeoman, Karma and launcher versions
  • Operating system and CI details
  • package.json scripts and relevant Karma configuration
  • Whether the failure occurs during scaffolding, installation or browser launch

11. Or skip the browser setup

If your goal is a clean screenshot of a generated project or documentation page rather than running its browser tests, ScreenshotNeo provides a direct website screenshot API. It accepts one GET request and returns PNG, JPEG, WebP or PDF. See the ScreenshotNeo API documentation for the complete option list.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie and consent banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account to get started.

12. FAQ

Is PhantomJS always the cause of a React-Webpack Yeoman failure?

No. The failure may happen before PhantomJS is involved, during npm installation, or later when Karma starts a browser.

Should I immediately downgrade Node.js?

No. The available evidence does not support a universal downgrade. Identify the package and failing phase, then compare its documented compatibility requirements.

Can I replace PhantomJS with ChromeHeadless in every test suite?

No. Karma supports both choices with matching launchers, but rendering and browser behavior can differ. Review tests and project versions before migrating.

What information should I post in an issue?

Post the exact command, first error, generator and dependency versions, Node.js/npm versions, operating system, relevant configuration and the phase where it fails.

Does a successful Yeoman run prove the project is fixed?

No. Run a clean dependency install and the complete Karma suite. Scaffolding, installation and browser startup are separate checkpoints.