Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Error warnings with `appearance: base-select` [4 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#84795•Fetched 2026-04-08 02:18:19
View on GitHub
Comments
4
Participants
3
Timeline
15
Reactions
0
Author
baileys-libaileys-li
Participants
baileys-libaileys-ligithub-actions[bot]github-actions[bot]icyJosephicyJoseph
Assignees
icyJosephicyJoseph
Timeline (top)
labeled ×5commented ×4assigned ×1closed ×1

Error Message

Also, build command is failed by TypeScript error if <selectedcontent /> is used without @ts-ignore:

Code Example

Property 'selectedcontent' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

---

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Enterprise
  Available memory (MB): 32257
  Available CPU cores: 8
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: 10.18.2
Relevant Packages:
  next: 16.0.0-canary.2 // Latest available version is detected (16.0.0-canary.2).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/baileys-li/next-select-warnings

To Reproduce

  1. Set up a Next.js app and run the dev script.
  2. Add an example using appearance: base-select (you can refer to examples from the Chrome Dev Blog).
  3. Open the DevTools Console and observe the errors.
<img width="1186" height="1062" alt="Image" src="https://github.com/user-attachments/assets/c1a5eaa6-6799-41e6-a0e4-06c988c10f48" />

Also, build command is failed by TypeScript error if <selectedcontent /> is used without @ts-ignore:

Property 'selectedcontent' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

Current vs. Expected behavior

Expected: No errors

I don’t understand why Next.js is enforcing HTML markup validity checks. If I need that, I would use separate tools designed specifically for validating HTML. By the way, Next.js allows placing <div> inside <button>, which is not valid according to the HTML specification.

To be honest, I prefer frameworks that don’t dictate which browser technologies I can or cannot use. It’s more flexible and aligns better with modern development practices.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Enterprise
  Available memory (MB): 32257
  Available CPU cores: 8
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: 10.18.2
Relevant Packages:
  next: 16.0.0-canary.2 // Latest available version is detected (16.0.0-canary.2).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, CSS, Linting, React

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

The appearance: base-select property is supported by 66.87% of users. While it’s limited to fresh Chromium users, that still represents a significant portion of users.

It makes sense to ship a lightweight, native <select /> implementation by default and dynamically load a library select for other browsers.

extent analysis

TL;DR

  • The most likely fix involves configuring Next.js to ignore HTML markup validity checks or using a TypeScript override to allow the selectedcontent property.

Guidance

  • Review the Next.js configuration to see if there's an option to disable HTML markup validity checks.
  • Consider adding a TypeScript override for the selectedcontent property using the @ts-ignore directive or by extending the JSX.IntrinsicElements type.
  • Investigate using a library or polyfill to support the appearance: base-select property in non-Chromium browsers.
  • Check if there are any open issues or discussions in the Next.js repository related to this problem.

Example

// Example of extending JSX.IntrinsicElements type
declare global {
  namespace JSX {
    interface IntrinsicElements {
      selectedcontent: any;
    }
  }
}

Notes

  • The provided environment information and package versions may be relevant to the issue, but without further context, it's difficult to determine their impact.
  • The use of appearance: base-select may be limited to certain browsers, and a fallback or polyfill may be necessary for broader support.

Recommendation

  • Apply workaround: Use a TypeScript override to allow the selectedcontent property, as this seems to be the most straightforward solution to the immediate problem.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#task chaining#parallel task#integration issue#index setup#retrieval issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Error warnings with `appearance: base-select` [4 comments, 3 participants]