ブラウザは JavaScript ファイルを HTML として読み取っているように見え、「Uncaught SyntaxError: Unexpected token '<'」を受け取ります。

Question

この未回答の質問と同様: ブラウザは React JS ファイルを JSX ではなく HTML として読み取るようです

Next.js、React、Typescript を使用してプロジェクトを構築しました。

しかし今、testScroll.js のような Javascript ファイルを追加しようとしています。

function init() {
    window.scrollTo(0, 1);
    window.scrollTo(0, -1);
    console.log('スクロール')
}
init()

このスクリプトは public/js/testScroll.js に保存しました。この index.tsx コンポーネントでそれを使用しようとします:

import { type NextPage } from "next";
import { Footer, Header, HomePageWrapper } from "~/componentsFromWebflow/homeComponents";
"next/script" からスクリプトをインポートします。
import Head from "next/head";

const ホーム: NextPage = () => {
  戻る （
    <>
      ＜頭＞
        <meta charSet="utf-8" />
        <title>エースイット</title>
        <メタ名="説明"コンテンツ="コンテンツ"/>
        <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="anonymous" />
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon 32.svg" rel="ショートカット アイコン" type="image/x-icon" />
        <link href="https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon 256.svg" rel="apple-touch-icon" />
        <link rel="icon" href="/favicon.ico" />
      </頭>
      <ヘッダー/>
      <HomePageWrapper />
      <フッター/>
      
      <スクリプト src="./js/scrollTest.js"
        type="テキスト/javascript"
        Strategy="beforeInteractive" />
    </>
  );
};

デフォルトのホームをエクスポート;

Script タグを使用して考えられるすべての戦略を試しましたが、何も機能しません。

問題は初めてページをロードすると次のエラーがスローされる:

<ブロック引用>

キャッチされない構文エラー:scrollTest.js:1:1

で予期しないトークン '<' が発生しました。

もちろん、エクスプローラーの [ソース] タブを確認すると、次のようになります。

しかし、数回リロードすると (通常は 1 回だけ)、動作し始め 、正しいコードが表示されます。

また、middleware.ts:

もあります。

import { getAuth, withClerkMiddleware } from "@clark/nextjs/server";
import { NextResponse } から "next/server";
インポート タイプ { NextRequest } から 'next/server'

// ユーザーのサインインを必要としないパスを設定します
const publicPaths = ['/', '/api/ストライプ-webhook*', '/api/clark-webhook*']

const isPublic = (パス: 文字列) => {
  return publicPaths.find(x =>
    path.match(new RegExp(`^${x}$`.replace('*$', '($|/)')))
  )
}

デフォルトをエクスポート withClerkMiddleware((req: NextRequest) => {
  if (isPublic(req.nextUrl.pathname)) {
    NextResponse.next() を返す
  }

  console.log("ミドルウェア実行中");
  const { userId } = getAuth(req);
  if (!userId) {
    console.log('userId が null、未定義、または空です');
    const IndexUrl = 新しい URL('/', req.url)
    IndexUrl.searchParams.set('redirect_url', req.url)
    NextResponse.redirect(indexUrl) を返す
  }

  NextResponse.next() を返します。
});

// 静的ファイル上で実行されているミドルウェアを停止します
import const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };

エクスプローラーからCookieを削除するとエラーが表示されるようですが、原因と修正方法がまだわかりません。

何が起こったのでしょうか?その解決方法は何ですか?

Answer 1

"/js/scrollTest.js" (Script でマークされたパス) が無視されるパスの一部ではないため、このエラーが発生します。したがって、ミドルウェアに入ると、NextResponse.redirect(indexUrl) で HTML が返され、ブラウザには JavaScript ファイルが必要です。

js/scrollTest.js を構成に追加するだけです:

リーリー