浏览器似乎将 JavaScript 文件读取为 HTML 并收到“Uncaught SyntaxError: Unexpected token '<'”-PHP中文网问答

类似于这个未回答的问题：浏览器似乎将 React JS 文件读取为 HTML，而不是 JSX

我有一个使用 Next.js、React 和 Typescript 构建的项目。

但现在我正在尝试添加一些 Javascript 文件，例如 testScroll.js：

function init() {
    window.scrollTo(0, 1);
    window.scrollTo(0, -1);
    console.log('scrolling')
}
init()

我将此脚本保存在 public/js/testScroll.js 上。我尝试在这个 index.tsx 组件上使用它：

import { type NextPage } from "next";
import { Footer, Header, HomePageWrapper } from "~/componentsFromWebflow/homeComponents";
import Script from "next/script";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>Ace-it</title>
        <meta name="description" content="content" />
        <meta content="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="shortcut icon" type="image/x-icon" />
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon%20256.svg" rel="apple-touch-icon" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <HomePageWrapper />
      <Footer />
      
      <Script src="./js/scrollTest.js"
        type="text/javascript"
        strategy="beforeInteractive" />
    </>
  );
};

export default Home;

我已经尝试了 Script 标记的所有可能策略，但没有任何效果。

问题是当我第一次加载页面时，它会抛出以下错误：

未捕获的语法错误：意外的标记“<”（位于scrollTest.js:1:1）

当然，如果我检查资源管理器上的“源”选项卡，它看起来像这样：

但是在重新加载几次之后（通常只有一次），它开始工作并显示正确的代码：

另外，我有一个 middleware.ts：

import { getAuth, withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

// Set the paths that don't require the user to be signed in
const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*']

const isPublic = (path: string) => {
  return publicPaths.find(x =>
    path.match(new RegExp(`^${x}$`.replace('*$', '($|/)')))
  )
}

export default withClerkMiddleware((req: NextRequest) => {
  if (isPublic(req.nextUrl.pathname)) {
    return NextResponse.next()
  }

  console.log("middleware running");
  const { userId } = getAuth(req);
  if (!userId) {
    console.log('userId is null, undefined or empty');
    const indexUrl = new URL('/', req.url)
    indexUrl.searchParams.set('redirect_url', req.url)
    return NextResponse.redirect(indexUrl)
  }

  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };

似乎如果我从资源管理器中删除 cookie，就会出现错误，但仍然不知道原因以及如何修复它。

发生了什么以及如何解决？