Der Browser scheint die JavaScript-Datei als HTML zu lesen und empfängt „Uncaught SyntaxError: Unexpected token '<''
P粉520545753
2023-09-05 13:59:44
<p>Ähnlich wie bei dieser unbeantworteten Frage: Browser scheinen React JS-Dateien als HTML und nicht als JSX zu lesen.</p>
<p>Ich habe ein Projekt mit Next.js, React und Typescript erstellt. </p>
<p>Aber jetzt versuche ich, einige Javascript-Dateien wie <code>testScroll.js</code> hinzuzufügen: </p>
<pre class="brush:php;toolbar:false;">function init() {
window.scrollTo(0, 1);
window.scrollTo(0, -1);
console.log('scrollen')
}
init()</pre>
<p>Ich habe dieses Skript unter <code>public/js/testScroll.js</code> gespeichert. Ich versuche es für diese <code>index.tsx</code>-Komponente zu verwenden: </p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p>Ich habe jede mögliche Strategie mit dem <code>Script</code>-Tag ausprobiert, aber nichts funktioniert.</p>
<p>Das Problem ist<strong>wenn ich die Seite zum ersten Mal lade, wird die folgende Fehlermeldung ausgegeben</strong>: </p>
<blockquote>
<p>Unerkannter Syntaxfehler: Unerwartetes Token „<“ bei scrollTest.js:1:1</p>
</blockquote>
<p>Wenn ich im Explorer die Registerkarte „Quelle“ überprüfe, sieht das natürlich so aus: </p>
<p><strong>Aber nach ein paar Malen </strong> (normalerweise nur einmal) funktioniert es </strong> und zeigt den richtigen Code an:
</p>
<p>Außerdem habe ich eine <code>middleware.ts</code>: </p>
<pre class="brush:php;toolbar:false;">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).*)', };</pre>
<p>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. </p>
<p>Was ist passiert und wie lässt sich das Problem beheben? </p>
您收到该错误,因为
"/js/scrollTest.js"
(Script
标记的路径)不是被忽略路径的一部分。因此,当您输入中间件时,您将返回带有NextResponse.redirect(indexUrl)
的 HTML,而浏览器需要 JavaScript 文件。您可以简单地将
js/scrollTest.js
添加到配置中: