Penyemak imbas nampaknya membaca fail JavaScript sebagai HTML dan menerima "Ralat Syntax Tidak Dijangkit: Token tidak dijangka '<'"

Question

Serupa dengan soalan yang tidak dijawab ini: Penyemak imbas kelihatan membaca fail React JS sebagai HTML, bukan JSX

Saya mempunyai projek yang dibina menggunakan Next.js, React dan Typescript.

Tetapi sekarang saya cuba menambah beberapa fail Javascript seperti testScroll.js:

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

Saya menyimpan skrip ini di public/js/testScroll.js. Saya cuba menggunakannya pada komponen index.tsx

import { type NextPage } dari "next";
import { Footer, Header, HomePageWrapper } daripada "~/componentsFromWebflow/homeComponents";
import Skrip daripada "seterusnya/skrip";
import Head dari "next/head";

const Laman Utama: NextPage = () =>
  kembali (
    <>
      <Kepala>
        <meta charSet="utf-8"
        <title>Ace-it</title>
        <nama meta="keterangan" kandungan="kandungan"
        < kandungan meta="lebar=lebar peranti, skala awal=1"
        <pautan href="https://fonts.googleapis.com" rel="prasambung"
        <pautan href="https://fonts.gstatic.com" rel="prasambung"
        <pautan href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon%2032.svg"relcut=""""
        <pautan href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon%20256.svg"/ipple"
        <pautan rel="ikon" href="/favicon.ico"
      </Kepala>
      <Pengepala />
      <HomePageWrapper />
      <Footer />
      
      <Skrip src="./js/scrollTest.js"
        type="teks/javascript"
        strategi="beforeInteractive"
    </>
  );
};

eksport lalai Laman Utama;

Saya telah mencuba setiap strategi yang mungkin dengan teg Skrip

Masalahnya ialahapabila saya memuatkan halaman buat kali pertama ia menimbulkan ralat berikut:

Ralat sintaks tidak ditangkap: Token tidak dijangka '<' di scrollTest.js:1:1

Sudah tentu, jika saya menyemak tab Sumber pada Explorer, ia kelihatan seperti ini:

Tetapi selepas memuat semula beberapa kali (biasanya hanya sekali), ia mula berfungsi

Selain itu, saya mempunyai perisian tengah.ts:

import { getAuth, withClerkMiddleware } daripada "@clerk/nextjs/server";
import { NextResponse } daripada "next/server";
jenis import { NextRequest } daripada 'next/server'

// Tetapkan laluan yang tidak memerlukan pengguna untuk dilog masuk
const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*']

const isPublic = (laluan: rentetan) =>
  kembalikan publicPaths.find(x =>
    path.match(RegExp baharu(`^${x}$`.replace('*$', '($|/)')))
  )
}

eksport lalai denganClerkMiddleware((req: NextRequest) => {
  if (isPublic(req.nextUrl.pathname)) {
    kembalikan NextResponse.next()
  }

  console.log("perisian tengah berjalan");
  const {userId } = getAuth(req);
  jika (!userId) {
    console.log('userId is null, undefined or kosong');
    const indexUrl = URL baharu('/', req.url)
    indexUrl.searchParams.set('redirect_url', req.url)
    kembalikan NextResponse.redirect(indexUrl)
  }

  kembalikan NextResponse.next();
});

// Hentikan Middleware berjalan pada fail statik
export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };

Nampaknya jika saya memadamkan kuki daripada explorer, ralat muncul, tetapi masih tidak tahu mengapa dan bagaimana untuk membetulkannya.

Apa yang berlaku dan bagaimana untuk membetulkannya?

Answer 1

Anda mendapat ralat ini kerana "/js/scrollTest.js" （Script 标记的路径）不是被忽略路径的一部分。因此，当您输入中间件时，您将返回带有 NextResponse.redirect(indexUrl) ialah HTML dan penyemak imbas memerlukan fail JavaScript.

Anda hanya boleh menambah js/scrollTest.js pada konfigurasi:

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