nextjs - 💡(How to fix) Fix Fix Biome noShadowRestrictedNames for Error boudaries [1 comments, 2 participants]

Exporting a component named Error as described in the Nextjs Docs will lead to a Biome Linter error noShadowRestrictedNames.

TL;DR

Disabling the noShadowRestrictedNames rule in the Biome linter configuration resolves the error when exporting a component named Error in a Next.js project.

Guidance

• The error noShadowRestrictedNames is triggered by the Biome linter when a component is named Error, which is a restricted name.
• To resolve the issue, update the biome.json file to disable the noShadowRestrictedNames rule for suspicious errors.
• Consider renaming the component to avoid conflicts with restricted names, if possible.
• Review the Next.js documentation and Biome linter rules to ensure compliance with best practices.

Example

"linter": {
  "enabled": true,
  "rules": {
    "suspicious": {
      "noShadowRestrictedNames": "off"
    }
  }
}

Notes

This solution assumes that disabling the noShadowRestrictedNames rule does not introduce any security vulnerabilities or other issues in the project.

Recommendation

Apply workaround: Disabling the noShadowRestrictedNames rule is a straightforward solution to resolve the error, but it may be worth considering renaming the component to avoid potential conflicts in the future.