浏览器似乎将 JavaScript 文件读取为 HTML 并收到'Uncaught SyntaxError: Unexpected token '<'”
P粉520545753
2023-09-05 13:59:44
<p>类似于这个未回答的问题：浏览器似乎将 React JS 文件读取为 HTML，而不是 JSX</p>
<p>我有一个使用 Next.js、React 和 Typescript 构建的项目。</p>
<p>但现在我正在尝试添加一些 Javascript 文件，例如 <code>testScroll.js</code>：</p>
<pre class="brush:php;toolbar:false;">function init() {
window.scrollTo(0, 1);
window.scrollTo(0, -1);
console.log('scrolling')
}
init()</pre>
<p>我将此脚本保存在 <code>public/js/testScroll.js</code> 上。我尝试在这个 <code>index.tsx</code> 组件上使用它：</p>
<pre class="brush:php;toolbar:false;">import { type NextPage } from "next";
import { Footer, Header, HomePageWrapper } from "~/componentsFromWebflow/homeComponents";
import Script from "next/script";
import Head from "next/head";
const Home: NextPage = () => {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>Ace-it</title>
<meta name="description" content="content" />
<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%2032.svg" rel="shortcut icon" 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" />
</Head>
<Header />
<HomePageWrapper />
<Footer />
<Script src="./js/scrollTest.js"
type="text/javascript"
strategy="beforeInteractive" />
</>
);
};
export default Home;</pre>
<p>我已经尝试了 <code>Script</code> 标记的所有可能策略，但没有任何效果。</p>
<p>问题是<strong>当我第一次加载页面时，它会抛出以下错误</strong>：</p>
<blockquote>
<p>未捕获的语法错误：意外的标记“<”（位于scrollTest.js:1:1）</p>
</blockquote>
<p>当然，如果我检查资源管理器上的“源”选项卡，它看起来像这样：</p>
<p><strong>但是在重新加载几次之后</strong>（通常只有一次），它<strong>开始工作</strong>并显示正确的代码：
</p>
<p>另外，我有一个 <code>middleware.ts</code>：</p>
<pre class="brush:php;toolbar:false;">import { getAuth, withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'
// Set the paths that don't require the user to be signed in
const publicPaths = ['/', '/api/stripe-webhook*', '/api/clerk-webhook*']
const isPublic = (path: string) => {
return publicPaths.find(x =>
path.match(new RegExp(`^${x}$`.replace('*$', '($|/)')))
)
}
export default withClerkMiddleware((req: NextRequest) => {
if (isPublic(req.nextUrl.pathname)) {
return NextResponse.next()
}
console.log("middleware running");
const { userId } = getAuth(req);
if (!userId) {
console.log('userId is null, undefined or empty');
const indexUrl = new URL('/', req.url)
indexUrl.searchParams.set('redirect_url', req.url)
return NextResponse.redirect(indexUrl)
}
return NextResponse.next();
});
// Stop Middleware running on static files
export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)', };</pre>
<p>似乎如果我从资源管理器中删除 cookie，就会出现错误，但仍然不知道原因以及如何修复它。</p>
<p>发生了什么以及如何解决？</p>
您收到该错误，因为
"/js/scrollTest.js"（Script标记的路径）不是被忽略路径的一部分。因此，当您输入中间件时，您将返回带有NextResponse.redirect(indexUrl)的 HTML，而浏览器需要 JavaScript 文件。您可以简单地将
js/scrollTest.js添加到配置中：export const config = { matcher: "/((?!_next/image|_next/static|favicon.ico|js/scrollTest.js).*)" };