ESLint randomly started enforcing new rule which is incorrect and breaking my builds

[tr1s]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Node version: v16.15.1
npm version: 8.19.0
Local ESLint version: 8.23.0
Global ESLint version: N/A
Operating System: macOS Big Sur / M1 Mac

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

ESLint is enforcing a rule which is breaking my build.

File	Vercel Build Error

I went through my old vercel builds and found where it stopped working—I updated some packages and that was it. I just tried to revert back to all the old package versions where the builds were working fine and I still am getting the errors now.

I'm not sure why ESLint decided to enforce this rule randomly or why it's throwing an error even though it's a real property. I know I can ignore it with next.js configs but I'm instead trying to figure out what's happening here.

I also have an identical personal portfolio project with the same setup code and up-to-date packages in which I'm not having this issue. I can't understand why it's only happening on this repo.

If you have any ideas as to what's happening please let me know, thank you.

I have made an issue over at ESLint's repo too as I'm not sure which would be more appropriate.

Expected Behavior

Builds should pass.

Link to reproduction

https://github.com/tr1s/nightizm

To Reproduce

Run npm run lint and see that these errors are showing up. They shouldn't be showing up at all.

[RareSecond]

We've been getting the exact same issue

A workaround on our end was updating eslint-plugin-react, but this shouldn't be necessary since it's a dependency of eslint-config-next, so this should be handled in that package.

[ljharb]

See my comments on the eslint issue; this should be closed as it's an issue with eslint-plugin-react (which has been fixed). See jsx-eslint/eslint-plugin-react#3380.

eslint-config-next surely uses ^ so it's 100% fine for you to have to update eslint-plugin-react.

[RareSecond]

@ljharb this shouldn't be closed, as eslint-plugin-react is a dependency of eslint-config-next and is currently not a direct dependency of our project. Next should update the version range to not include the broken dependency.

[tr1s]

yeah @JDansercoer @ljharb looks like esling-config-next is using the old version of eslint-plugin-react:

I will keep the issue open until my eslint-config-next get's updated. It's currently 12.2.5 and 12.2.6 is in canary still (assuming this update will have the correctly updated package).

[ljharb]

That’s not how transitive deps work.

The next config is using ^ to depend on the react plugin, so you already updated it beyond v7.29.4, just not far enough to include the fixed version. It’s on you to update it farther.

[icyJoseph]

What should be done about #40269, which flags styled-jsx tags, <style jsx>.

[balazsorban44]

As @ljharb suggests, this is not a Next.js issue, so I'll close it. You just have to make sure that your dependencies are up-to-date.

As for jsx on style @icyJoseph, it's a special property allowed by Next.js, so a separate issue is needed, which has been opened already here #40321, and a PR fixing that issue can be found here #40331

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.