react / react/react

[Compiler Bug]: set-state-in-effect false negative whenever tagged template literals are present

Ouverte
#35,029 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: React Compiler Status: Unconfirmed Type: Bug
Langage dominant
JavaScript
Étoiles
251k
Forks
51.4k
Merge moyen
2 j 4 h
PR mergées (30 j)
53

Description

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://stackblitz.com/edit/stackblitz-starters-9kernjp2?file=app%2Fpage.tsx

Repro steps

React Compiler appears to bail out of functions whenever a tagged template literal is present. I've tested this with the set-state-in-effect rule but I believe this causes false negatives for any ESLint rule which uses the compiler. Some rules like exhaustive-deps, that I assume do not use the compiler, are unaffected.

Steps to reproduce

  1. Write an invalid code snippet you expect to fail the set-state-in-effect rule
  2. Include a tagged template literal anywhere inside the same component as the invalid code
  3. Observe that the presence of the tagged template literal causes the error to be suppressed

I've included a small reproduction with both set-state-in-effect and exhaustive-deps violations. Running npm run lint shows only the exhaustive-deps failure unless you comment out the tagged template

This might already be on your radar as React Compiler not supporting tagged template literals seems to be a known issue and this error prevents lowering to HIR

How often does this bug happen?

Every time

What version of React are you using?

19

What version of React Compiler are you using?

1.0

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction StackBlitz dans app/page.tsx et exécutez npm run lint pour confirmer que le tagged template supprime l’erreur set-state-in-effect, tandis que exhaustive-deps continue de la signaler. Lisez ensuite les emplacements référencés de BuildHIR.ts concernant la gestion des tagged templates et l’abaissement HIR. C’est terminé lorsque le code set-state-in-effect invalide est signalé même lorsqu’un tagged template literal est présent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
tooling
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.