Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

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

Closed
1 task done
Chamberlainfrancis opened this issue Sep 7, 2022 · 2 comments · Fixed by #40331
Closed
1 task done

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

Chamberlainfrancis opened this issue Sep 7, 2022 · 2 comments · Fixed by #40331
Labels
Linting Related to `next lint` or ESLint with Next.js.

Comments

@Chamberlainfrancis
Copy link

Verify canary release

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

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: Ubuntu 20.04.0 LTS Wed Sep 07 2022 17:34:02 GMT+0100 (West Africa Standard Time)
Binaries:
Node: 16.14.2
npm: 7.17.0
Yarn: 1.22.10
pnpm: 7.9.5
Relevant packages:
next: 12.2.6-canary.10
eslint-config-next: 12.2.5
react: 17.0.1
react-dom: 17.0.1

What browser are you using? (if relevant)

Chrome 105 on Windows 10

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I created some components using the next-js styled-jsx <style jsx> worked fine on v11 of next-js, but after upgrading to v12 I get an error when using 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.

Expected Behavior

Next-js shouldn't throw an error because on default it supports styled components. In other words, this - <style jsx></style> should be recognized as valid.

Link to reproduction

https://stackblitz.com/edit/nextjs-syp4l9?file=pages/index.js

To Reproduce

Spin up a next js app the usual way:

npx create-next-app nextjs-blog

your package.json should look like so below, ensure you are on at least next-js version 12

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "info": "next info"
  },
  "dependencies": {
    "next": "^12.2.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "eslint": "^8.23.0",
    "eslint-config-next": "^12.2.5"
  }
}

Create a sample component like below in pages/index.js

export default function Home() {
  return (
    <div>
      <style jsx>{`
      .title a {
        color: #0070f3;
        text-decoration: none;
      }
      `}</style>
      <Head>
        <title>Create Next App</title>
      </Head>

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
       </main>
    </div>
  );
}

in terminal run next build or next lint next-js should throw an error

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

Either way, you can't build to production because the error breaks the build process.
@Chamberlainfrancis Chamberlainfrancis added the bug Issue was opened via the bug report template. label Sep 7, 2022
@github-actions github-actions bot added the please verify canary Please verify the issue with the latest canary branch. label Sep 7, 2022
@balazsorban44 balazsorban44 removed the please verify canary Please verify the issue with the latest canary branch. label Sep 7, 2022
@vercel vercel deleted a comment from github-actions bot Sep 7, 2022
@balazsorban44 balazsorban44 added Linting Related to `next lint` or ESLint with Next.js. kind: bug and removed bug Issue was opened via the bug report template. labels Sep 7, 2022
@balazsorban44 balazsorban44 mentioned this issue Sep 7, 2022
Merged
11 tasks
@balazsorban44
Copy link
Member

I could verify this and opened a PR to fix it. For now, you can force "eslint-plugin-react": "7.31.1" in your project as the issue only happens when eslint-plugin-react@7.31.2 or higher is installed.

@balazsorban44 balazsorban44 mentioned this issue Sep 8, 2022
Closed
1 task
ijjk pushed a commit that referenced this issue Sep 8, 2022
@balazsorban44
fix(lint): disable react/no-unknown-property (#40331)
5793301 
~(PR jsx-eslint/eslint-plugin-react#3377)
introduced a change in `eslint-plugin-react@7.31.2` that will now show
an error when unknown properties appear on elements. We can opt out of
this by overriding the default.~

As discussed internally, we are turning `react/no-unknown-property` off,
as it might be confusing even if different props are being used, (eg.:
`css` for `emotion`).

It's easy to fix
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md#rule-options,
but it might not be clear at first glance that Next.js is using
`eslint-plugin-react` internally.

If the user wants to enforce this rule, they can still add it to their
own `rules` config.

Fixes #40321, ref: #40269,
#38333
@github-actions
Copy link
Contributor

github-actions bot commented Oct 9, 2022

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 9, 2022
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees
No one assigned
Labels
Linting Related to `next lint` or ESLint with Next.js.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(lint): disable react/no-unknown-property vercel/next.js
2 participants
@balazsorban44 @Chamberlainfrancis