Le navigateur semble lire le fichier JavaScript au format HTML et reçoit "Uncaught SyntaxError: Unexpected token '<'"

Question

Similaire à cette question sans réponse : les navigateurs semblent lire les fichiers React JS au format HTML, et non au format JSX

J'ai un projet construit à l'aide de Next.js, React et Typescript.

Mais maintenant, j'essaie d'ajouter des fichiers Javascript comme testScroll.js:

fonction init() {
    window.scrollTo(0, 1);
    window.scrollTo(0, -1);
    console.log('défilement')
}
init()

J'ai enregistré ce script dans public/js/testScroll.js. J'essaie de l'utiliser sur ce composant index.tsx

importer { type NextPage } depuis "suivant" ;
importer { Footer, Header, HomePageWrapper } depuis "~/componentsFromWebflow/homeComponents" ;
importer le script depuis "suivant/script" ;
importer la tête depuis « suivant/tête » ;

const Accueil : Page suivante = () =>
  retour (
    ≪>
      <Tête>
        <meta charSet="utf-8" />
        <title>As-it</title>
        <meta name="description" content="contenu"
        <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="anonyme" />
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon%2032.svg" rel="icône de raccourci" 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" />
      ≪/Tête>
      <En-tête />
      <HomePageWrapper />
      <Pied de page />
      
      <Script src="./js/scrollTest.js"
        type="texte/javascript"
        stratégie="avantInteractif" />
    ≪/>
  );
} ;

exporter la page d'accueil par défaut ;

J'ai essayé toutes les stratégies possibles avec la balise Script, mais rien ne fonctionne.

Le problème estlorsque je charge la page pour la première fois, l'erreur suivante:

Erreur de syntaxe non détectée : jeton inattendu '<' dans scrollTest.js:1:1

Bien sûr, si je vérifie l'onglet Source de l'Explorateur, cela ressemble à ceci :

Mais après avoir rechargé plusieurs fois (généralement une seule fois), il commence à fonctionner

De plus, j'ai un fichier middleware.ts:

import { getAuth, withClerkMiddleware } depuis "@clerk/nextjs/server";
importer { NextResponse } depuis "suivant/serveur" ;
type d'importation { NextRequest } depuis 'suivant/serveur'

// Définit les chemins qui ne nécessitent pas que l'utilisateur soit connecté
const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*']

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

exporter par défaut avecClerkMiddleware((req : NextRequest) => {
  if (isPublic(req.nextUrl.pathname)) {
    retourner NextResponse.next()
  }

  console.log("middleware en cours d'exécution");
  const { userId } = getAuth(req);
  si (!IDutilisateur) {
    console.log('userId est nul, non défini ou vide');
    const indexUrl = nouvelle URL ('/', req.url)
    indexUrl.searchParams.set('redirect_url', req.url)
    retourner NextResponse.redirect (indexUrl)
  }

  return NextResponse.next();
});

// Arrête l'exécution du Middleware sur les fichiers statiques
export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };

Il semble que si je supprime le cookie de l'explorateur, l'erreur apparaît, mais je ne sais toujours pas pourquoi et comment la corriger.

Que s’est-il passé et comment y remédier ?

Answer 1

Vous obtenez cette erreur car "/js/scrollTest.js" （Script 标记的路径）不是被忽略路径的一部分。因此，当您输入中间件时，您将返回带有 NextResponse.redirect(indexUrl) est HTML et le navigateur nécessite des fichiers JavaScript.

Vous pouvez simplement ajouter js/scrollTest.js à la configuration :

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