Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix ## Error Type Runtime SyntaxError ## Error Message Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector. at <unknown> (src/components/button/useButtonClick.ts:19:15) [1 comments, 2 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#93482•Fetched 2026-05-06 06:11:51
View on GitHub
Comments
1
Participants
2
Timeline
5
Reactions
0
Author
oop39391-botoop39391-bot
Participants
github-actions[bot]github-actions[bot]oop39391-botoop39391-bot
Timeline (top)
closed ×1commented ×1issue_type_added ×1labeled ×1

Error Message

Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector.

at <unknown> (src/components/button/useButtonClick.ts:19:15)

Code Example

## Error Type
Runtime SyntaxError

## Error Message
Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector.


    at <unknown> (src/components/button/useButtonClick.ts:19:15)

## Code Frame
  17 |     setTimeout(() => {
  18 |       if (lenis) {
> 19 |         lenis.scrollTo(`#${sectionId}`, { offset: 0 });
     |               ^
  20 |       } else {
  21 |         const element = document.getElementById(sectionId);
  22 |         if (element) {

Next.js version: 16.0.7 (Turbopack)
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

Error Type Runtime SyntaxError ## Error Message Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector. at <unknown> (src/components/button/useButtonClick.ts:19:15) ## Code Frame 17 | setTimeout(() => { 18 | if (lenis) { > 19 | lenis.scrollTo(#${sectionId}, { offset: 0 }); | ^ 20 | } else { 21 | const element = document.getElementById(sectionId); 22 | if (element) { Next.js version: 16.0.7 (Turbopack)

To Reproduce

Error Type

Runtime SyntaxError

Error Message

Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector.

at <unknown> (src/components/button/useButtonClick.ts:19:15)

Code Frame

17 | setTimeout(() => { 18 | if (lenis) {

19 | lenis.scrollTo(#${sectionId}, { offset: 0 }); | ^ 20 | } else { 21 | const element = document.getElementById(sectionId); 22 | if (element) {

Next.js version: 16.0.7 (Turbopack)

Current vs. Expected behavior

Error Type

Runtime SyntaxError

Error Message

Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector.

at <unknown> (src/components/button/useButtonClick.ts:19:15)

Code Frame

17 | setTimeout(() => { 18 | if (lenis) {

19 | lenis.scrollTo(#${sectionId}, { offset: 0 }); | ^ 20 | } else { 21 | const element = document.getElementById(sectionId); 22 | if (element) {

Next.js version: 16.0.7 (Turbopack)

Provide environment information

## Error Type
Runtime SyntaxError

## Error Message
Failed to execute 'querySelector' on 'Document': '##contact' is not a valid selector.


    at <unknown> (src/components/button/useButtonClick.ts:19:15)

## Code Frame
  17 |     setTimeout(() => {
  18 |       if (lenis) {
> 19 |         lenis.scrollTo(`#${sectionId}`, { offset: 0 });
     |               ^
  20 |       } else {
  21 |         const element = document.getElementById(sectionId);
  22 |         if (element) {

Next.js version: 16.0.7 (Turbopack)

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

Not sure

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

next dev (local)

Additional context

No response

extent analysis

TL;DR

The issue is likely due to an invalid selector ##contact being passed to lenis.scrollTo, which expects a valid CSS selector.

Guidance

  • Verify that the sectionId variable is correctly set and does not contain any invalid characters.
  • Check if the lenis object is properly initialized and configured before calling scrollTo.
  • Ensure that the element with the id contact exists in the DOM and is not dynamically generated after the scrollTo method is called.
  • Consider adding a check to validate the sectionId before passing it to lenis.scrollTo to prevent similar errors in the future.

Example

if (document.getElementById(sectionId)) {
  lenis.scrollTo(`#${sectionId}`, { offset: 0 });
} else {
  console.error(`Element with id ${sectionId} not found`);
}

Notes

The issue seems to be related to the sectionId variable containing an invalid character (#). The lenis.scrollTo method expects a valid CSS selector, and ##contact is not a valid selector.

Recommendation

Apply a workaround to validate and sanitize the sectionId variable before passing it to lenis.scrollTo. This can be done by checking if the element with the given id exists in the DOM and handling the case where it does not.

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…
#agent setup#task chaining#parallel task#integration issue#index setup

Still need to ship something?

×6

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

Back to top recommendations

TRENDING