浏览器似乎将 JavaScript 文件读取为 HTML 并收到“Uncaught SyntaxError: Unexpected token '<'”
P粉520545753
P粉520545753 2023-09-05 13:59:44
[React讨论组]
<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 &quot;next&quot;; import { Footer, Header, HomePageWrapper } from &quot;~/componentsFromWebflow/homeComponents&quot;; import Script from &quot;next/script&quot;; import Head from &quot;next/head&quot;; const Home: NextPage = () =&gt; { return ( &lt;&gt; &lt;Head&gt; &lt;meta charSet=&quot;utf-8&quot; /&gt; &lt;title&gt;Ace-it&lt;/title&gt; &lt;meta name=&quot;description&quot; content=&quot;content&quot; /&gt; &lt;meta content=&quot;width=device-width, initial-scale=1&quot; name=&quot;viewport&quot; /&gt; &lt;link href=&quot;https://fonts.googleapis.com&quot; rel=&quot;preconnect&quot; /&gt; &lt;link href=&quot;https://fonts.gstatic.com&quot; rel=&quot;preconnect&quot; crossOrigin=&quot;anonymous&quot; /&gt; &lt;link href=&quot;https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388eda6b076360c_Faivcon%2032.svg&quot; rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; /&gt; &lt;link href=&quot;https://uploads-ssl.webflow.com/64296e49c388ed7c157635f0/64296e49c388edc81976360d_Faivcon%20256.svg&quot; rel=&quot;apple-touch-icon&quot; /&gt; &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt; &lt;/Head&gt; &lt;Header /&gt; &lt;HomePageWrapper /&gt; &lt;Footer /&gt; &lt;Script src=&quot;./js/scrollTest.js&quot; type=&quot;text/javascript&quot; strategy=&quot;beforeInteractive&quot; /&gt; &lt;/&gt; ); }; 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 &quot;@clerk/nextjs/server&quot;; import { NextResponse } from &quot;next/server&quot;; 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) =&gt; { return publicPaths.find(x =&gt; path.match(new RegExp(`^${x}$`.replace('*$', '($|/)'))) ) } export default withClerkMiddleware((req: NextRequest) =&gt; { if (isPublic(req.nextUrl.pathname)) { return NextResponse.next() } console.log(&quot;middleware running&quot;); 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>
P粉520545753
P粉520545753

全部回复(1)
P粉714780768

您收到该错误,因为 "/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).*)" };
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号