Unknown property 'jsx' found react/no-unknown-property

[Chamberlainfrancis]

In my project, I created some components using the next-js styled-jsx <style jsx> works fine on v11 of next-js, but after upgrade to v12 I get an error when yarn lint or yarn build with the message Error: Unknown property 'jsx' found react/no-unknown-property

For clarity, I have reproduced this on - stackblitz - run yarn lint or yarn build to see the error.

I don't understand the error and why it is so, anyways I'd appreciate any help on solving the issue.

PS: I could ignore the error by disabling some ESLint rules. but I don't think it's best.

Below is an example of my package.json

<style jsx>{``}</style>

{
"dependencies": {
    "next": "12",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "^8.23.0",
    "eslint-config-next": "^12.2.5"
  }
}

[icyJoseph]

Do you think you can reproduce this in stackblitz? I cannot reproduce it on a testing project.

[Chamberlainfrancis]

Here you go - example on stackblitz run yarn lint or yarn build to see the error.

[joshuaolusayo]

In my project, I created some components using the next-js styled-jsx <style jsx> works fine on v11 of next-js, but after upgrade to v12 I get an error when yarn lint or yarn build with the message Error: Unknown property 'jsx' found react/no-unknown-property

For clarity, I have reproduced this on - stackblitz - run yarn lint or yarn build to see the error.

I don't understand the error and why it is so, anyways I'd appreciate any help on solving the issue.

PS: I could ignore the error by disabling some ESLint rules. but I don't think it's best.

Below is an example of my package.json

<style jsx>{}</style> ``

{
"dependencies": {
    "next": "12",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "^8.23.0",
    "eslint-config-next": "^12.2.5"
  }
}

Having the same issue for hours now

[icyJoseph]

Alright, this is a dependency issue, eslint-plugin-react has been through some changes, and I can clearly see that starting with version 7.31.2, the linting starts to fail, hence why I couldn't reproduce it locally.

The releases page for this plugin: https://github.com/jsx-eslint/eslint-plugin-react/releases, shows a bunch of related issues being fixed over the past 5 versions, up to 7.31.7, however, the issue at hand jsx unknown, is present in all of them.

I am not sure if this is an upstream issue, meaning that it has to be fixed on the eslint-plugin-react or if the Next.js plugin should somehow tweak it.

I'd say open a bug on this repository, and perhaps we can resolve there
We need to determine where to fix the issue, either here or upstream on the react plugin repo.

[George-Miao]

yes just tried it and now my CI works properly. Thanks for responding.

[joshuaolusayo]

Can this ignore workaround be explicitly defined please? @ljharb

[ljharb]

@joshuaolusayo i'm not sure what you mean. you want me to type out 'react/no-unknown-property': [2, { ignore: ['jsx'] }]?

[George-Miao]

Can this ignore workaround be explicitly defined please? @ljharb

George-Miao/glog-next@37641ab

Here is my fix which works perfectly fine now

[joshuaolusayo]

Oh! Thanks for that.. instead of 2, was trying to put "warn" or "off" in the array which doesn't help. Had to resolve to this:
{/* eslint-disable-next-line react/no-unknown-property */}
I will refactor my implementation.

[Chamberlainfrancis]

This is a workaround to ignore the invalid/nonstandard jsx property on a style tag. Just posting for those who might get confused or lost in the thread.

Create a .eslintrc.json file if it's not existing on your project already, then add this rule.

{
  "rules": {
    "react/no-unknown-property": [
      2,
      {
        "ignore": [
          "jsx"
        ]
      }
    ]
  }
}

Remember, other custom property names must be prefixed with data- to be valid.

[stackaccount1]

Helped me

[Chenzo]

omg. thank you.

[midotek]

thanks 👌

[omerisk1]

it worked. thanks

[ifightcode]

It worked for me also

[makedirectory]

You can also add this to the top of the file in question

/* eslint-disable react/no-unknown-property */