Ä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 ( <>  Ace-it   ); }; 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?