Registry / web-framework / react-dev-utils

react-dev-utils

library12.0.1jsnpmunverified

react-dev-utils is a collection of internal utility modules primarily used by Create React App (CRA) to abstract and manage webpack configurations, development server setups, build processes, and other development-related tasks. It includes tools for error formatting, path resolution, webpack plugin management like `ModuleScopePlugin`, and environment variable handling. The package is not typically consumed directly by applications but rather by build tools like `react-scripts`. Its versioning and release cadence are tightly coupled with `react-scripts`, making direct maintenance releases uncommon outside of major `react-scripts` updates. The current stable version of `react-dev-utils` is 12.0.1, which corresponds to `react-scripts` v5.x.x. This version incorporates significant updates such as webpack 5, Jest 27, and ESLint 8, ensuring compatibility with modern JavaScript ecosystems. It provides a standardized and optimized development experience for CRA projects, significantly minimizing configuration overhead for developers by encapsulating complex build logic. Developers typically interact with these utilities indirectly through `react-scripts` commands, though advanced users might import specific modules for custom setups, especially in ejected CRA applications.

web-framework devops

npm install react-dev-utils

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DEV-UTILS

react-dev-utils

web-frameworkjavascriptv12.0.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.

ModuleScopePlugin

✓ import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';

✗ import { ModuleScopePlugin } from 'react-dev-utils'; const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); // CommonJS is also supported but ESM is preferred in modern setups.

Most utilities are exported from specific subpaths within 'react-dev-utils', not directly from the main package entry. This plugin is crucial for preventing imports outside the 'src' directory in Create React App projects.

createDevServerConfig

✓ import { createDevServerConfig } from 'react-dev-utils/WebpackDevServerUtils';

✗ import createDevServerConfig from 'react-dev-utils/WebpackDevServerUtils'; const createDevServerConfig = require('react-dev-utils/WebpackDevServerUtils').createDevServerConfig;

This function is part of the `WebpackDevServerUtils` module and helps generate a webpack-dev-server configuration object following Create React App's conventions.

formatWebpackMessages

✓ import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';

✗ import { formatWebpackMessages } from 'react-dev-utils/formatWebpackMessages'; const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

This utility is a default export from its specific module and is used to format webpack compilation messages for improved readability in the console.

Demonstrates how to set up a custom webpack development server using `react-dev-utils` for port selection, URL preparation, and dev server configuration, mimicking Create React App's internal logic. This example uses `webpack`, `webpack-dev-server`, and several utilities from `react-dev-utils` to initialize and manage the server.

import WebpackDevServer from 'webpack-dev-server'; import webpack from 'webpack'; import { createDevServerConfig, choosePort, prepareUrls } from 'react-dev-utils/WebpackDevServerUtils'; import openBrowser from 'react-dev-utils/openBrowser'; async function startCustomDevServer() { const DEFAULT_PORT = parseInt(process.env.PORT || '3000', 10); const HOST = process.env.HOST || '0.0.0.0'; const port = await choosePort(HOST, DEFAULT_PORT); if (!port) { console.log('No port found, exiting.'); return; } const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const appName = 'My Custom React App'; const urls = prepareUrls(protocol, HOST, port, '/'); // Basic webpack configuration example const webpackConfig: webpack.Configuration = { mode: 'development', entry: './src/index.tsx', // Assume a TypeScript entry point output: { path: process.cwd() + '/build', filename: 'bundle.js', publicPath: '/', }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, module: { rules: [ { test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ }, { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ } ], }, plugins: [] // Add webpack plugins here }; const devServerConfig = createDevServerConfig( { proxy: undefined, allowedHost: undefined, publicPath: webpackConfig.output?.publicPath, contentBase: webpackConfig.output?.path, }, urls.lanUrlForConfig ); const compiler = webpack(webpackConfig); const server = new WebpackDevServer(devServerConfig, compiler); server.startCallback(() => { console.log(`Starting the development server on ${urls.localUrlForBrowser}`); openBrowser(urls.localUrlForBrowser!); }); ['SIGINT', 'SIGTERM'].forEach(function (sig) { process.on(sig, function () { server.close(); process.exit(); }); }); } startCustomDevServer();

Debug

Known issues

breakingWhen `react-scripts` updated to v5.0.0, it introduced significant upgrades to underlying dependencies including webpack 5, Jest 27, ESLint 8, and PostCSS 8. Projects that have been ejected from Create React App or directly consume `react-dev-utils` will need to manually update their configurations and resolve potential breaking changes with these major dependency bumps.

fix

For ejected projects, carefully review release notes for webpack, Jest, ESLint, and PostCSS. Manually update webpack configurations, Jest setups, ESLint rules, and PostCSS plugins to be compatible with their new major versions. Refer to the `react-scripts` v5 migration guide for common patterns.

affects: >=5.0.0

breakingThe `react-scripts` v4.0.0 release brought support for React 17, including the new JSX transform, and TypeScript 4. These changes can affect how JSX is transpiled and how TypeScript projects are configured.

fix

Ensure your project's `tsconfig.json` is configured for TypeScript 4 if using TypeScript. For React 17, the new JSX transform might require no changes or minor adjustments depending on your Babel configuration, but be aware of its implications for global React import requirements.

affects: >=4.0.0

gotcha`react-dev-utils` is primarily an internal package for Create React App (`react-scripts`). While its modules are exported and can be used directly, its API is not officially stable and may introduce breaking changes without explicit major version bumps or extensive documentation, as its main consumer is `react-scripts`.

fix

If directly consuming `react-dev-utils`, be prepared for potential undocumented breaking changes. Consider carefully whether directly importing is necessary, or if extending `react-scripts` (e.g., via tools like `craco`) is a more stable approach.

affects: >=3.0.0

gotchaSeveral `react-scripts` patch releases (e.g., v3.4.2, v3.4.3, v3.4.4) addressed `npm audit` warnings related to transitive dependencies like `webpack-dev-server`, `terser-webpack-plugin`, and `resolve-url-loader`. While these vulnerabilities were often deemed not to directly affect Create React App projects, they could trigger security scanner warnings.

fix

Always ensure your `react-scripts` package (and by extension, `react-dev-utils` if used directly) is updated to the latest stable patch version to mitigate any reported security vulnerabilities, even if they are described as non-impacting for CRA projects.

affects: >=3.4.2 <4.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'your-component' in '.../src'

This error often occurs when `ModuleScopePlugin` prevents imports from outside the `src` folder (or other configured root directories) in a Create React App project.

fix

Ensure all your application code and components are located within the `src` directory or any other directories explicitly configured to be within the module scope. If you genuinely need to import from outside, you might need to eject and modify the webpack configuration, or use tools like `craco` to override the `ModuleScopePlugin`.

TypeError: Cannot read properties of undefined (reading 'WebpackDevServer')

This indicates an incorrect or outdated usage of `WebpackDevServerUtils`, possibly due to changes in its internal structure or how `WebpackDevServer` is expected to be imported or instantiated.

fix

Review the `WebpackDevServerUtils` source or latest `react-scripts` webpack configuration to understand the current usage. Ensure `WebpackDevServer` is correctly imported (e.g., `import WebpackDevServer from 'webpack-dev-server';`) and its constructor is called with the expected arguments, often including a configuration object and a webpack compiler instance.

ESLint encountered a parsing error or cannot resolve plugin '...' after upgrading Create React App.

Upgrading `react-scripts` to v5.0.0 (which includes `react-dev-utils` v12.0.1) also upgrades ESLint to v8. This can lead to breaking changes in ESLint configurations, especially regarding plugin resolution or rule changes.

fix

If you have a custom `.eslintrc` file or ESLint plugins, update them to be compatible with ESLint v8. Check the ESLint v8 migration guide for details on rule changes and plugin compatibility. Ensure all ESLint-related packages are also updated to their latest versions.

Upgrade

Version history

12.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/create-react-app ↗

packagehttps://www.npmjs.com/package/react-dev-utils ↗