{"id":10896,"library":"find-webpack","title":"Webpack Config Finder Utility","description":"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.","status":"maintenance","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/bahmutov/find-webpack","tags":["javascript","webpack","utility"],"install":[{"cmd":"npm install find-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add find-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add find-webpack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses named exports. Direct `require('find-webpack')` returns an object with all functions.","wrong":"import findWebpack from 'find-webpack';\nconst config = findWebpack.getWebpackOptions();","symbol":"getWebpackOptions","correct":"import { getWebpackOptions } from 'find-webpack';\n// Or for CJS:\nconst { getWebpackOptions } = require('find-webpack');"},{"note":"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.","wrong":"const config = require('find-webpack').tryLoadingWebpackConfig();","symbol":"tryLoadingWebpackConfig","correct":"import { tryLoadingWebpackConfig } from 'find-webpack';\n// Or for CJS:\nconst { tryLoadingWebpackConfig } = require('find-webpack');"},{"note":"This function modifies the provided Webpack config object in place, typically for Cypress integration. It accepts an options object and the config to modify.","wrong":"findWebpack.cleanForCypress(opts, config);","symbol":"cleanForCypress","correct":"import { cleanForCypress } from 'find-webpack';\n// Or for CJS:\nconst { cleanForCypress } = require('find-webpack');"}],"quickstart":{"code":"import { getWebpackOptions, cleanForCypress } from 'find-webpack';\nimport path from 'path';\n\nconst projectRoot = process.cwd();\n\nconsole.log('Attempting to find Webpack options...');\nlet webpackConfig = getWebpackOptions();\n\nif (webpackConfig) {\n  console.log('Webpack config found. Initial entry points:', webpackConfig.entry);\n\n  // Example of cleaning the config for Cypress with coverage and custom folder transpilation\n  const cypressComponentFolder = path.join(projectRoot, 'cypress', 'component');\n  const cypressFixturesFolder = path.join(projectRoot, 'cypress', 'fixtures');\n\n  const cleanOptions = {\n    reactScripts: true, // Specific cleanup for react-scripts projects\n    coverage: true,     // Add istanbul babel plugin for code coverage\n    addFolderToTranspile: [cypressComponentFolder, cypressFixturesFolder],\n    looseModules: true // Enable @babel/plugin-transform-modules-commonjs\n  };\n\n  cleanForCypress(cleanOptions, webpackConfig);\n  console.log('Webpack config cleaned for Cypress. Modified entry points:', webpackConfig.entry);\n  // console.log('Full modified config:', JSON.stringify(webpackConfig, null, 2));\n} else {\n  console.warn('Could not find Webpack options. Ensure package.json is in CWD or pass a config path.');\n}","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"When 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"A 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.","severity":"gotcha","affected_versions":">=2.0.0 <2.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"This error often occurs in versions before 2.2.1 when `cleanForCypress` is called with `addFolderToTranspile` and the internal Babel presets array is undefined.","error":"TypeError: Cannot read property 'includes' of undefined"},{"fix":"Ensure that the script calling `getWebpackOptions()` is executed from the root directory of your project, where the `package.json` file resides.","cause":"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.","error":"Webpack config is undefined or null when calling getWebpackOptions()"},{"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.","cause":"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.","error":"Incorrect environment variables (NODE_ENV, BABEL_ENV) detected after loading webpack config"}],"ecosystem":"npm"}