Next.js 13.4 Uncaught SyntaxError: Unexpected token '<' webpack.js の対象方法

Next.js 13.4を使っていて、どこも悪いところがなさそうなのに Uncaught SyntaxError: Unexpected token '<' webpack.js が出た時の対象方法を紹介します。正直これ直すのに本当に時間がかかりました。。。

私がやった時の原因はmiddleware.tsにありました。 middleware.tsではpathとuserのログインステータスに応じて、 ログインしていない場合はログインページに飛ばすという処理をしていました。

しかしながら、middlewareでは、jsのファイルや、favicon.icoのファイルのリクエストも流れ込んできます。 それらも対象のpathとして認識していたのが原因でした。 当初のコードはこのようなものでした。

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from '@/lib/database.types'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient<Database>({ req, res })
  await supabase.auth.getSession()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user && req.nextUrl.pathname !== '/login' && req.nextUrl.pathname !== '/auth/callback') {
    return NextResponse.redirect(`${req.nextUrl.origin}/login`)
  }
  return res
}

ただ、console.logでpathを見てみると、下記のようなpathも対象として、redirectがなされているという状況でした。

 '/_next/static/chunks/webpack.js'
 '/_next/static/chunks/main-app.js' 

そこで、本来のpath以外は除くような処理が必要です。 そのため、このように本来のpath以外は来ないようにすると解決が可能です。

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from '@/lib/database.types'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient<Database>({ req, res })
  await supabase.auth.getSession()
  const { data: { user } } = await supabase.auth.getUser()
  const isOrdinalPath = req.nextUrl.pathname.search(/\./) == -1 // .がついているpathは通常のpathではないと判断
  if (isOrdinalPath && !user && req.nextUrl.pathname !== '/login' && req.nextUrl.pathname !== '/auth/callback') {
    return NextResponse.redirect(`${req.nextUrl.origin}/login`)
  }
  return res
}

参考: Unable to use the middleware feature with React 18 & output:standalone feature #38934

参考: Uncaught SyntaxError: expected expression, got '<' while using Next.js middleware