Skip to content

linter: React Hook "RootLayout" cannot be called in an async function. #11587

@LasseRosenow

Description

@LasseRosenow

What version of Oxlint are you using?

1.0.0

What command did you run?

oxlint

What does your .oxlintrc.json config file look like?

{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "unicorn", "typescript", "oxc", "nextjs"],
  "rules": {
    "no-unused-vars": "off",
    "react/rules-of-hooks": "error"
  }
}

What happened?

I use a React Server Component so it is an async component. Then I put a useState hook inside, which is not allowed by rules-of-hooks.

I get the following error on the async function RootLayout itself.

React Hook "RootLayout" cannot be called in an async function.

So the error says that the hook RootLayout is a problem, but the hook here would be useState.

I would expect that the error happens at the useState call and not on the function and that it would correctly point to useState not being allowed here.

Image

Metadata

Metadata

Assignees

Labels

Type

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions