OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-07 12:20:38 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
ed1351c4fb
react/compiler/packages/eslint-plugin-react-compiler
History
Henry Q. Dineen ed1351c4fb
[compiler] improve zod v3 backwards compat (#34877) 
## Summary

When upgrading to `babel-plugin-react-compiler@1.0.0` in a project that
uses `zod@3` we are running into TypeScript errors like:

```
node_modules/babel-plugin-react-compiler/dist/index.d.ts:435:10 - error TS2694: Namespace '"/REDACTED/node_modules/zod/v3/external"' has no exported member 'core'.

435     }, z.core.$strip>>>;
             ~~~~
```

This problem seems to be related to
d6eb735938, which introduced zod v3/v4
compatibility. Since `zod` is bundled into the compiler source this does
not cause runtime issues and only manifests as TypeScript errors. My
proposed solution is this PR is to use zod's [subpath versioning
strategy](https://zod.dev/v4/versioning?id=versioning-in-zod-4) which
allows you to support v3 and v4 APIs on both major versions.

Changes in this PR include:

- Updated `zod` import paths to `zod/v4`
- Bumped min `zod` version to `^3.25.0` for zod which guarantees the
`zod/v4` subpath is available.
- Updated `zod-validation-error` import paths to
`zod-validation-error/v4`
- Bumped min `zod-validation-error ` version to `^3.5.0` 
- Updated `externals` tsup configuration where appropriate. 

Once the compiler drops zod v3 support we could optionally remove the
`/v4` subpath from the imports.

## How did you test this change?

Not totally sure the best way to test. I ran `NODE_ENV=production yarn
workspace babel-plugin-react-compiler run build --dts` and diffed the
`dist/` folder between my change and `v1.0.0` and it looks correct. We
have a `patch-package` patch to workaround this for now and it works as
expected.

```diff
diff --git a/node_modules/babel-plugin-react-compiler/dist/index.d.ts b/node_modules/babel-plugin-react-compiler/dist/index.d.ts
index 81c3f3d..daafc2c 100644
--- a/node_modules/babel-plugin-react-compiler/dist/index.d.ts
+++ b/node_modules/babel-plugin-react-compiler/dist/index.d.ts
@@ -1,7 +1,7 @@
 import * as BabelCore from '@babel/core';
 import { NodePath as NodePath$1 } from '@babel/core';
 import * as t from '@babel/types';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import { NodePath, Scope } from '@babel/traverse';
 
 interface Result<T, E> {
```

Co-authored-by: Henry Q. Dineen <henryqdineen@gmail.com>
2025-10-16 09:46:55 -07:00
..
__tests__ [eprh] Remove NoUnusedOptOutDirectives (#34703) 2025-10-02 19:19:01 -04:00
src [compiler] Setup RecommendedLatest preset (#34782) 2025-10-08 15:45:22 -04:00
babel.config.js [compiler] Remove @babel/plugin-proposal-private-methods (#34715) 2025-10-03 09:13:55 -07:00
package.json [compiler] improve zod v3 backwards compat (#34877) 2025-10-16 09:46:55 -07:00
README.md docs(eslint-plugin-react-compiler): fix typo (#32149) 2025-01-22 16:59:50 +01:00
tsconfig.json [compiler] Migrate compiler packages to tsup (#32550) 2025-03-07 16:41:55 -05:00
tsup.config.ts [compiler] improve zod v3 backwards compat (#34877) 2025-10-16 09:46:55 -07:00

README.md

eslint-plugin-react-compiler

ESLint plugin surfacing problematic React code found by the React compiler.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-react-compiler:

npm install eslint-plugin-react-compiler --save-dev

Usage

Flat config

Edit your eslint 8+ config (for example eslint.config.mjs) with the recommended configuration:

+ import reactCompiler from "eslint-plugin-react-compiler"
import react from "eslint-plugin-react"

export default [
    // Your existing config
    { ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },
+   reactCompiler.configs.recommended    
]

Legacy config (.eslintrc)

Add react-compiler to the plugins section of your configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "react-compiler"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "react-compiler/react-compiler": "error"
    }
}

Rules

TODO: Run eslint-doc-generator to generate the rules list.