react19-compat-linter

React 19 removes several deprecated APIs that were available in React 18 and earlier (ReactDOM.render, findDOMNode, etc.) Before upgrading to React 19, you need to remove these from your code—you might use a lint rule for this. But you also need to make sure that all bundled dependencies are clean—and this problem is much harder.

This package solves this by providing a utility to scan your dependencies to identify compatibility issues. At a high level, it is composed of two parts: (1) a webpack plugin that emits a list of modules to lint, and (2) a utility that runs ESLint over those modules and reports on incompatible packages.

Why split the functionality like this? While webpack is the most common bundler, you may be using something else. By decoupling the linting from the bundler, you can produce your own module list and still reuse the linting functionality. And linting is slow; you may want to separate it from your webpack process anyway.

Getting Started

1. Install the package

# NPM
npm install --save-dev react19-compat-linter

# Yarn
yarn add --dev react19-compat-linter

2. Configure the webpack plugin

Add the DependencyModuleListPlugin to your webpack configuration to extract a list of all modules used in your build:

const { DependencyModuleListPlugin } = require('react19-compat-linter');
const outputFile = './modules-list.json';

module.exports = {
  // ... your webpack config
  plugins: [
    new DependencyModuleListPlugin(outputFile)
  ]
};

When you run webpack, this plugin will generate a JSON file containing all bundled JavaScript (or TypeScript) modules from packages in the node_modules directory.

3. Run the linter

You can run the linter via the command line:

npm react19-compat-linter ./modules-list.json

Or integrate it into your build via the API:

const { runLinter } = require('react19-compat-linter');

runLinter('./modules-list.json').then(result => {
  console.log(`Found violations in ${result.packages.length} packages.`);
});