find-webpack

library2.2.1jsnpmunverified

find-webpack is a utility library designed to programmatically locate and modify Webpack configuration settings, particularly useful for projects built with `react-scripts` (Create React App) or custom Webpack setups. As of its latest stable version, 2.2.1 (released January 2021), it provides functions to extract Webpack options, including handling the nuances of `react-scripts`'s hidden configurations. It also offers specific utilities for integrating with tools like Cypress, enabling cleanup of optimization plugins and dynamic addition of folders to Babel's transpilation scope for testing purposes. While its release cadence has been irregular since 2021, it was actively maintained with features and bug fixes throughout 2020, differentiating itself by simplifying complex Webpack config access and modification for specific ecosystem integrations.

devops

npm install find-webpack

github ↗package ↗

INSTALL

IMPORT

SIG · FIND-WEBPACK

find-webpack

devopsjavascriptv2.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

getWebpackOptions

✓ import { getWebpackOptions } from 'find-webpack'; // Or for CJS: const { getWebpackOptions } = require('find-webpack');

✗ import findWebpack from 'find-webpack'; const config = findWebpack.getWebpackOptions();

The library primarily uses named exports. Direct `require('find-webpack')` returns an object with all functions.

tryLoadingWebpackConfig

✓ import { tryLoadingWebpackConfig } from 'find-webpack'; // Or for CJS: const { tryLoadingWebpackConfig } = require('find-webpack');

✗ const config = require('find-webpack').tryLoadingWebpackConfig();

This function attempts to load a webpack.config.js file from a given path and may modify process.env.NODE_ENV and process.env.BABEL_ENV.

cleanForCypress

✓ import { cleanForCypress } from 'find-webpack'; // Or for CJS: const { cleanForCypress } = require('find-webpack');

✗ findWebpack.cleanForCypress(opts, config);

This function modifies the provided Webpack config object in place, typically for Cypress integration. It accepts an options object and the config to modify.

This quickstart demonstrates how to find an application's Webpack configuration (especially from react-scripts) and then modify it using `cleanForCypress` to prepare it for Cypress component testing, including adding coverage instrumentation and specifying additional folders for Babel transpilation.

import { getWebpackOptions, cleanForCypress } from 'find-webpack'; import path from 'path'; const projectRoot = process.cwd(); console.log('Attempting to find Webpack options...'); let webpackConfig = getWebpackOptions(); if (webpackConfig) { console.log('Webpack config found. Initial entry points:', webpackConfig.entry); // Example of cleaning the config for Cypress with coverage and custom folder transpilation const cypressComponentFolder = path.join(projectRoot, 'cypress', 'component'); const cypressFixturesFolder = path.join(projectRoot, 'cypress', 'fixtures'); const cleanOptions = { reactScripts: true, // Specific cleanup for react-scripts projects coverage: true, // Add istanbul babel plugin for code coverage addFolderToTranspile: [cypressComponentFolder, cypressFixturesFolder], looseModules: true // Enable @babel/plugin-transform-modules-commonjs }; cleanForCypress(cleanOptions, webpackConfig); console.log('Webpack config cleaned for Cypress. Modified entry points:', webpackConfig.entry); // console.log('Full modified config:', JSON.stringify(webpackConfig, null, 2)); } else { console.warn('Could not find Webpack options. Ensure package.json is in CWD or pass a config path.'); }

Debug

Known issues

breakingWhen loading webpack configurations, `find-webpack` version 2.0.0 introduced a breaking change that requires `process.env.NODE_ENV` to be set to 'test' for proper loading of environment variables and plugins, particularly for `react-scripts` based projects.

fix

Ensure `process.env.NODE_ENV` is set to 'test' before calling `getWebpackOptions` or `tryLoadingWebpackConfig` if you encounter issues with environment-dependent config loading in `react-scripts`.

affects: >=2.0.0

gotchaThe `getWebpackOptions` function, when used with `react-scripts` projects, expects a `package.json` file to be present in the current working directory (`process.cwd()`). If `package.json` is missing, `react-scripts` will not load its configuration, and `find-webpack` will fail to retrieve it.

fix

Run your script from the root of your project where `package.json` is located, or ensure your `process.cwd()` is correctly set if running from a non-standard environment.

affects: >=1.0.0

gotchaThe `tryLoadingWebpackConfig` function and implicitly `getWebpackOptions` can set `process.env.BABEL_ENV` and `process.env.NODE_ENV` to 'development' during the loading process and leave them in that state. This could unintentionally affect other parts of your application or build process that rely on these environment variables.

fix

Be aware of these side effects. If precise control over `NODE_ENV` and `BABEL_ENV` is critical, consider resetting them after `find-webpack` operations or inspecting their values. For `v2.0.0+` specifically, `NODE_ENV` being 'test' is expected for some scenarios.

affects: >=1.0.0

gotchaA bug in earlier versions (fixed in v2.2.1) could lead to a `TypeError: Cannot read property 'includes' of undefined` when using the `addFolderToTranspile` option within `cleanForCypress`, if `options.babelPresets` was undefined.

fix

Upgrade to `find-webpack@2.2.1` or newer to resolve this bug. If unable to upgrade, ensure `options.babelPresets` is explicitly defined if you're dynamically modifying Babel configuration.

affects: >=2.0.0 <2.2.1

Errors

Common errors & fixes

TypeError: Cannot read property 'includes' of undefined

This error often occurs in versions before 2.2.1 when `cleanForCypress` is called with `addFolderToTranspile` and the internal Babel presets array is undefined.

fix

Upgrade `find-webpack` to version `2.2.1` or later. Alternatively, ensure the Babel configuration passed to `cleanForCypress` explicitly defines presets if you're manipulating them.

Webpack config is undefined or null when calling getWebpackOptions()

When using `find-webpack` to detect a `react-scripts` configuration, it expects a `package.json` file to be present in the current working directory to properly initialize `react-scripts`'s environment.

fix

Ensure that the script calling `getWebpackOptions()` is executed from the root directory of your project, where the `package.json` file resides.

Incorrect environment variables (NODE_ENV, BABEL_ENV) detected after loading webpack config

The `tryLoadingWebpackConfig` and `getWebpackOptions` functions in `find-webpack` may internally set `process.env.NODE_ENV` and `process.env.BABEL_ENV` to 'development' or 'test' (for v2.0.0+) during config loading, which can persist.

fix

Be mindful of this side effect. If you need specific environment variables, set them before calling `find-webpack` functions or reset them immediately afterwards.

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/bahmutov/find-webpack ↗

packagehttps://www.npmjs.com/package/find-webpack ↗