<p>답변이 없는 질문과 유사합니다: 브라우저는 React JS 파일을 JSX가 아닌 HTML로 읽는 것처럼 보입니다</p> <p>Next.js, React 및 Typescript를 사용하여 빌드한 프로젝트가 있습니다. </p> <p>하지만 지금은 <code>testScroll.js</code>와 같은 일부 Javascript 파일을 추가하려고 합니다. </p> <pre class="brush:php;toolbar:false;">함수 초기화() { window.scrollTo(0, 1); window.scrollTo(0, -1); console.log('스크롤') } 초기화()</pre> <p>이 스크립트를 <code>public/js/testScroll.js</code>에 저장했습니다. 이 <code>index.tsx</code> 구성요소에 사용하려고 합니다. </p> <pre class="brush:php;toolbar:false;">"next"에서 { type NextPage } 가져오기;; "~/comComponentsFromWebflow/homeComponents"에서 import { Footer, Header, HomePageWrapper }를; "next/script"에서 스크립트 가져오기;; "next/head"에서 머리를 가져옵니다. const 홈: NextPage = () => 반품 ( <> <머리> <meta charSet="utf-8" /> <title>에이스잇</title> <메타 이름="설명" <메타 콘텐츠="width=device-width,initial-scale=1" name="viewport" /> <link href="https://fonts.googleapis.com" rel="preconnect" <link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon%2032.svg"rel="바로가기 아이콘" <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon%20256.svg"rel="apple-touch-icon" <link rel="icon" href="/favicon.ico" </머리> <헤더 /> <HomePageWrapper /> <바닥글 /> <스크립트 src="./js/scrollTest.js" type="텍스트/자바스크립트" strategy="beforeInteractive" /> </> ); }; 기본 홈 내보내기;</pre> <p><code>Script</code> 태그를 사용하여 가능한 모든 전략을 시도했지만 아무것도 작동하지 않습니다.</p> <p>문제는<strong>페이지를 처음 로드할 때 다음 오류가 발생한다는 것입니다</strong>:</p> <인용문> <p>잡히지 않은 구문 오류: scrollTest.js:1:1에 예상치 못한 토큰 '<'이 있습니다.</p> </인용문> <p>물론, Explorer의 소스 탭을 확인하면 다음과 같습니다.</p> <p><strong>그러나 몇 번(보통 한 번) 다시 로드한 후에는 <strong>작동을 시작하고</strong> 올바른 코드가 표시됩니다. </p> <p>또한 <code>middleware.ts</code>가 있습니다: </p> <pre class="brush:php;toolbar:false;">"@clerk/nextjs/server"에서 { getAuth, withClerkMiddleware } 가져오기;; import { NextResponse } from "next/server" 'next/server'에서 가져오기 유형 { NextRequest } // 사용자가 로그인할 필요가 없는 경로를 설정합니다. const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*'] const isPublic = (경로: 문자열) => return publicPaths.find(x => path.match(new RegExp(`^${x}$`.replace('*$', '($|/)'))) ) } ClerkMiddleware((req: NextRequest) => {를 사용하여 기본값 내보내기 if (isPublic(req.nextUrl.pathname)) { NextResponse.next()를 반환합니다. } console.log("미들웨어 실행 중"); const { userId } = getAuth(req); if (!userId) { console.log('userId가 null이거나 정의되지 않았거나 비어 있습니다.'); const indexUrl = 새 URL('/', req.url) indexUrl.searchParams.set('redirect_url', req.url) NextResponse.redirect(indexUrl) 반환 } NextResponse.next()를 반환합니다. }); // 정적 파일에서 실행 중인 미들웨어를 중지합니다. const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };</pre> <p>탐색기에서 쿠키를 삭제하면 오류가 나타나는 것 같은데 여전히 이유와 해결 방법을 모르겠습니다. </p> <p>어떤 일이 발생했으며 어떻게 해결하나요? </p>