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

Question

답변이 없는 질문과 유사합니다: 브라우저는 React JS 파일을 JSX가 아닌 HTML로 읽는 것처럼 보입니다

Next.js, React 및 Typescript를 사용하여 빌드한 프로젝트가 있습니다.

하지만 지금은 testScroll.js와 같은 일부 Javascript 파일을 추가하려고 합니다.

함수 초기화() {
    window.scrollTo(0, 1);
    window.scrollTo(0, -1);
    console.log('스크롤')
}
초기화()

이 스크립트를 public/js/testScroll.js에 저장했습니다. 이 index.tsx 구성요소에 사용하려고 합니다.

"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" />
    </>
  );
};

기본 홈 내보내기;

Script 태그를 사용하여 가능한 모든 전략을 시도했지만 아무것도 작동하지 않습니다.

문제는페이지를 처음 로드할 때 다음 오류가 발생한다는 것입니다:

<인용문>

잡히지 않은 구문 오류: scrollTest.js:1:1에 예상치 못한 토큰 '<'이 있습니다.

물론, Explorer의 소스 탭을 확인하면 다음과 같습니다.

그러나 몇 번(보통 한 번) 다시 로드한 후에는 작동을 시작하고 올바른 코드가 표시됩니다.

또한 middleware.ts가 있습니다:

"@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).*)', };

탐색기에서 쿠키를 삭제하면 오류가 나타나는 것 같은데 여전히 이유와 해결 방법을 모르겠습니다.

어떤 일이 발생했으며 어떻게 해결하나요?

Answer 1

이 오류는 "/js/scrollTest.js" （Script 标记的路径）不是被忽略路径的一部分。因此，当您输入中间件时，您将返回带有 NextResponse.redirect(indexUrl)이 HTML이고 브라우저에 JavaScript 파일이 필요하기 때문에 발생합니다.

구성에 js/scrollTest.js만 추가하면 됩니다:

으아악