Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in 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 The issue should be verified against next@canary. It will be closed after 30 days of inactivity label Sep 7, 2022
@balazsorban44 balazsorban44 removed the please verify canary The issue should be verified against next@canary. It will be closed after 30 days of inactivity 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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