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 (with optional config file):

npm react19-compat-linter ./modules-list.json
npm react19-compat-linter ./modules-list.json ./config.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.`);
});

When calling via the API, you can optionally add a config object with a list of package exceptions. The result will contain isCompliant, which will be true if there are no violations outside the list of package exceptions:

const { runLinter } = require('react19-compat-linter');
const linterConfig = { packageExceptions: ['package1', 'package2'] };

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

4. Config options

packageExceptions

A list of packages where violations are expected. All violations will be reported, but the result will only be compliant if there are no violations outside excepted packages.