Der Browser scheint die JavaScript-Datei als HTML zu lesen und empfängt „Uncaught SyntaxError: Unexpected token '<'“

Question

Ähnlich wie bei dieser unbeantworteten Frage: Browser scheinen React JS-Dateien als HTML und nicht als JSX zu lesen.

Ich habe ein Projekt mit Next.js, React und Typescript erstellt.

Aber jetzt versuche ich, einige Javascript-Dateien wie testScroll.js hinzuzufügen:

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

Ich habe dieses Skript unter public/js/testScroll.js gespeichert. Ich versuche es für diese index.tsx-Komponente zu verwenden:

import { type NextPage } from "next";
import { Footer, Header, HomePageWrapper } from "~/componentsFromWebflow/homeComponents";
Skript aus „next/script“ importieren;
import Head from "next/head";

const Home: NextPage = () =>
  zurückkehren (
    <>
      <Kopf>
        <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"
        <link href="https://fonts.gstatic.com" rel="preconnect"
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon%2032.svg" rel="shortcut icon" />
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon%20256.svg" rel="apple-touch-icon"
        <link rel="icon" href="/favicon.ico>
      </Kopf>
      <Kopfzeile />
      <HomePageWrapper />
      <Fußzeile />
      
      <Script src="./js/scrollTest.js"
        type="text/javascript"
        strategy="beforeInteractive"
    </>
  );
};

Standard-Startseite exportieren;

Ich habe jede mögliche Strategie mit dem Script-Tag ausprobiert, aber nichts funktioniert.

Das Problem istwenn ich die Seite zum ersten Mal lade, wird die folgende Fehlermeldung ausgegeben:

Unerkannter Syntaxfehler: Unerwartetes Token „<“ bei scrollTest.js:1:1

Wenn ich im Explorer die Registerkarte „Quelle“ überprüfe, sieht das natürlich so aus:

Aber nach ein paar Malen (normalerweise nur einmal) funktioniert es und zeigt den richtigen Code an:

Außerdem habe ich eine middleware.ts:

import { getAuth, withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from „next/server“;
Importtyp { NextRequest } von 'next/server'

// Legen Sie die Pfade fest, bei denen der Benutzer nicht angemeldet sein muss
const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*']

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

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

  console.log("Middleware läuft");
  const { userId } = getAuth(req);
  if (!userId) {
    console.log('userId ist null, undefiniert oder leer');
    const indexUrl = neue URL('/', req.url)
    indexUrl.searchParams.set('redirect_url', req.url)
    return NextResponse.redirect(indexUrl)
  }

  return NextResponse.next();
});

// Stoppen Sie die Ausführung von Middleware für statische Dateien
export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };

Es scheint, dass der Fehler auftritt, wenn ich das Cookie aus dem Explorer lösche, aber ich weiß immer noch nicht, warum und wie ich ihn beheben kann.

Was ist passiert und wie lässt sich das Problem beheben?

Answer 1

您收到该错误，因为 "/js/scrollTest.js" （Script 标记的路径）不是被忽略路径的一部分。因此，当您输入中间件时，您将返回带有 NextResponse.redirect(indexUrl) 的 HTML，而浏览器需要 JavaScript 文件。

您可以简单地将 js/scrollTest.js 添加到配置中：

export const config = { matcher: "/((?!_next/image|_next/static|favicon.ico|js/scrollTest.js).*)" };