Nextjs 脚本标签有时不加载

Question

The above is the error message that comes when the script tag doesn't load.以上是脚本标签未加载时出现的错误消息。 I have around 6 script tags.我有大约 6 个脚本标签。

I have these Scripts tags in my code;我的代码中有这些 Scripts 标签； sometimes they load and sometimes they don't.有时他们加载，有时他们没有。 But I can see them in the code if I inspect them in the browser.但是如果我在浏览器中检查它们，我可以在代码中看到它们。

<Script src="assets/js/jquery-3.5.1.min.js" strategy="beforeInteractive" />
 <Script src="assets/js/bootstrap.bundle.min.js" strategy="beforeInteractive" />

I have included them in pages/_app.js and pages/_document.js, and also in some other pages just to test out but they don't work correctly.我已将它们包含在 pages/_app.js 和 pages/_document.js 以及其他一些页面中，只是为了进行测试，但它们无法正常工作。

Only after I refresh the page then they start working correctly.只有在我刷新页面后，它们才开始正常工作。

OS: Linux操作系统：Linux
on windows they load properly.在 windows 上，它们正确加载。 only on Linux I'm having this issue.仅在 Linux 上我遇到了这个问题。

Can someone help me out with this as I need this thing resolved Quickly?有人可以帮我解决这个问题，因为我需要快速解决这个问题吗？ Appriciate your help.感谢您的帮助。

Answer 1

The jQuery loaded by the <Script /> component (without beforeInteractive ) will certainly not be available when React hydrates your page by default (If it is available during useEffect , then it is a bug and you should report it to Next.js). <Script />组件加载的beforeInteractive在默认情况下 React 水合您的页面时肯定不可用（如果它在useEffect期间可用，那么这是一个错误，您应该将其报告给 Next.js）。

<Script /> component is designed to handle non-essential scripts for you (Eg, Google Analytics is only essential for website owners, but not essential for rendering the page). <Script />组件旨在为您处理非必要的脚本（例如，Google Analytics 仅对网站所有者至关重要，但对于呈现页面不是必需的）。 Thus Next.js will never load the script before React hydrates your page, resulting in a better performance and user experience.因此 Next.js 永远不会在 React 水合您的页面之前加载脚本，从而获得更好的性能和用户体验。

In this case, jQuery should be considered an essential script for rendering the page, thus it shouldn't be loaded through <Script /> .在这种情况下， jQuery 应该被认为是渲染页面的必要脚本，因此不应通过<Script />加载它。

I would recommend the following approaches:我会推荐以下方法：

Includes jQuery and bootstrap in your bundle在您的捆绑包中包括 jQuery 和引导程序

import $ from 'assets/js/jquery-3.5.1.min.js';
import 'assets/js/bootstrap.bundle.min.js';

Use beforeInteractive使用beforeInteractive

Note: <Script strategy="beforeInteractive" /> can only be used inside a custom _document !注意： <Script strategy="beforeInteractive" />只能在自定义_document中使用！

// _document.jsx
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        {/** You can place it everywhere as long as it is inside a custom _document */}
        {/** And Next.js will always inject the script to the <head /> */}
        <Script
          src="assets/js/jquery-3.5.1.min.js"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}

More details about <Script /> component: https://nextjs.org/docs/basic-features/script <Script />组件的更多细节： https://nextjs.org/docs/basic-features/script

Answer 2

This is a bug that I was able to reproduce.这是我能够重现的错误。 I filed a bug report for you.我为您提交了错误报告。

Nextjs 脚本标签有时不加载

问题描述

2 个解决方案

解决方案1
1 2022-08-14 06:33:27

解决方案2
0 2022-08-12 15:37:15

Nextjs 脚本标签有时不加载

问题描述

2 个解决方案

解决方案1 1 2022-08-14 06:33:27

解决方案2 0 2022-08-12 15:37:15

解决方案1
1 2022-08-14 06:33:27

解决方案2
0 2022-08-12 15:37:15