<p>Similaire à cette question sans réponse : les navigateurs semblent lire les fichiers React JS au format HTML, et non au format JSX</p> <p>J'ai un projet construit à l'aide de Next.js, React et Typescript. </p> <p>Mais maintenant, j'essaie d'ajouter des fichiers Javascript comme <code>testScroll.js</code>: </p> <pre class="brush:php;toolbar:false;">fonction init() { window.scrollTo(0, 1); window.scrollTo(0, -1); console.log('défilement') } init()</pre> <p>J'ai enregistré ce script dans <code>public/js/testScroll.js</code>. J'essaie de l'utiliser sur ce composant <code>index.tsx</code> <pre class="brush:php;toolbar:false;">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 ;</pre> <p>J'ai essayé toutes les stratégies possibles avec la balise <code>Script</code>, mais rien ne fonctionne.</p> <p>Le problème est<strong>lorsque je charge la page pour la première fois, l'erreur suivante</strong>:</p> <blockquote> <p>Erreur de syntaxe non détectée : jeton inattendu '<' dans scrollTest.js:1:1</p> </blockquote> <p>Bien sûr, si je vérifie l'onglet Source de l'Explorateur, cela ressemble à ceci : </p> <p><strong>Mais après avoir rechargé plusieurs fois</strong> (généralement une seule fois), il <strong>commence à fonctionner</strong> </p> <p>De plus, j'ai un fichier <code>middleware.ts</code>:</p> <pre class="brush:php;toolbar:false;">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).*)', };</pre> <p>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. </p> <p>Que s’est-il passé et comment y remédier ? </p>

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