브라우저가 JavaScript 파일을 HTML로 읽는 것처럼 보이고 "Uncaught SyntaxError: Unexpected token '<'"을 수신합니다.
<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>