[Compiler Bug]: Incorrect immutability error "Error: This value cannot be modified"

[snowystinger]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHYDMobgFwEsIMACAMQhgFsBRAGwWoQ3wAoAHGCDsASlLBMpUo3ykYCLKQC8pKGAQAlKWwxR69PgG5h8xbSxYEBNmwEyAfIL0ixpQhg5RxcyVgD8AOjixJrXTIRB2k2AEJHZ3wBISDgiQR8WAxA+IBfTFtRRNIsKmpZBycXLzyaQKz7SUVXXPzvasTU4MJQsuoYrJF2r0ba81lrWPj4gHpR0gATCFJIZlJ8AAtHAHMwLtI05pEMuISkmDIBqxs9kVbSNnbOs+CevsK+7eDd9Oa0gBpSAG13AF0dJkgpIDkcsgAeSIuBYATw4CBkaBA+AQAA98EiElgZMB3GlSKNLHpARhdiAPiA4CQsIQVigQIRqBwqOJ8HCEIJSAAFehQFaOADyHCIJDAm1y3AKAHIAEYAQxlCHoAFoOLz+RhlZI5QRlVSmYRGDBRpNCGB8FKKhg2MMCaN9RxDXKRRgALIQSYIZCkJFyzRIzD4sDOs00hBinl8wXC4gYfjacngRYQADuAElWAhDn6wCgsDmEGkgA

Repro steps

The compiler appears to do just fine with this file. However, eslint is complaining on the assignment to form

form.reset = () => {

Modifying component props or hook arguments is not allowed. Consider using a local variable instead.

but this isn't either of those things. And if I used
let form = input.querySelector...
then the error goes away. But I believe this is equivalent to that.

How often does this bug happen?

Every time

What version of React are you using?

19.2

What version of React Compiler are you using?

7.0.0

[josephsavona]

Hmm, can you double check your linter version?

[snowystinger]

yarn why eslint-plugin-react-hooks
└─ react-spectrum-monorepo@workspace:.
   └─ eslint-plugin-react-hooks@npm:7.0.0 [8657b] (via npm:^7.0.0 [8657b])
yarn why eslint
└─ react-spectrum-monorepo@workspace:.
   └─ eslint@npm:9.12.0 [8657b] (via npm:^9.12.0 [8657b])

any others i should check?

[josephsavona]

Weird, it works in playground so it should be fine in eslint too. The exact same code that you pasted above fails?

[snowystinger]

Ah, no, you are correct, in my effort to simplify, I didn't quite check it against an exact match.

I made it closer to our actual code and now it fails in the compiler as well
https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEUYCAYhDALYCiANgtQpjgEoJk4AUMCayIhzQB5AEYArBLgA8ACQAqAWQAyASUwAHKDgZMWOIgB8imKPXoA+AJRFgAHWIkytNGmk9utgLyW7jokCiRkM8LR0ibyI+NAB+ADo4WD5WAG4AoLw0Im4AQjDtHFsHJyDohBxYTHTSogBfRwzAkKI0KmpIogKdeLaaGqbgivKuTr7qBL4uGrKsnPHiwcDx+KnhqK9IvxKysoB6PaIAEwgiSGYiHAALMIBzMCX6maCG2r5KmGJN339awLnuOMiAAyYEjCqLP5BFZrQxRWHPMqvJHPOoAGiIAG0YgBdaw1OogNEgOCENB4W4oEB4aiaKiGHAAT00CDsRAACvQoLcwiJNPhCGB6q0YBAOgByMQAQzECHoAFpNFyeZh5Xwpbh5aTaXhGDA9kc8GAcOKBphuDsiAdtZpdVKBZglBAjghBPYQFKLO7HHUzvajeTOBzlbz+QRMGB8UTwFcIAB3DQ4BCfT1gFBoVMIOpAA

[lilpomm]

Elimina

[josephsavona]

@snowystinger Ahh gotcha - we’re losing track of it being a ref because of the optional property access - ref?.current. This is a bug, thanks for reporting!

[lilpomm]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHYDMobgFwEsIMACAMQhgFsBRAGwWoQ3wAoAHGCDsASlLBMpUo3ykYCLKQC8pKGAQAlKWwxR69PgG5h8xbSxYEBNmwEyAfIL0ixpQhg5RxcyVgD8AOjixJrXTIRB2k2AEJHZ3wBISDgiQR8WAxA+IBfTFtRRNIsKmpZBycXLzyaQKz7SUVXXPzvasTU4MJQsuoYrJF2r0ba81lrWPj4gHpR0gATCFJIZlJ8AAtHAHMwLtI05pEMuISkmDIBqxs9kVbSNnbOs+CevsK+7eDd9Oa0gBpSAG13AF0dJkgpIDkcsgAeSIuBYATw4CBkaBA+AQAA98EiElgZMB3GlSKNLHpARhdiAPiA4CQsIQVigQIRqBwqOJ8HCEIJSAAFehQFaOADyHCIJDAm1y3AKAHIAEYAQxlCHoAFoOLz+RhlZI5QRlVSmYRGDBRpNCGB8FKKhg2MMCaN9RxDXKRRgALIQSYIZCkJFyzRIzD4sDOs00hBinl8wXC4gYfjacngRYQADuAElWAhDn6wCgsDmEGkgA

Repro steps

The compiler appears to do just fine with this file. However, eslint is complaining on the assignment to form

form.reset = () => {

Modifying component props or hook arguments is not allowed. Consider using a local variable instead.

but this isn't either of those things. And if I used
let form = input.querySelector...
then the error goes away. But I believe this is equivalent to that.

How often does this bug happen?

Every time

What version of React are you using?

19.2

What version of React Compiler are you using?

7.0.0

Borrar todo lo anterior