参考错误:jQuery未定义Next.js

aoyhnmkz  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(102)

我正在使用next js和jquery,Bootstrap和其他一些js库。
这是我的_app. js

import React from 'react';
import { Layout } from '../components';
import { Toaster } from 'react-hot-toast';
import Script from "next/script";

function MyApp({ Component, pageProps }) {

  return (
    <>
      <Script src="/js/jquery-2.1.1.min.js" type="text/javascript"></Script>
      <Script src="/js/bootstrap.min.js" type="text/javascript"></Script>
      <Script type="text/javascript" src="/js/jstree.min.js" ></Script>
      <Script type="text/javascript" src="/js/template.js" ></Script>
      <Script src="/js/common.js" type="text/javascript" ></Script>
      <Script src="/js/global.js" type="text/javascript" ></Script>
      <Script src="/js/owl.carousel.min.js" type="text/javascript" ></Script>
      <Layout>
        <Toaster />
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

export default MyApp

字符串
但我得到了这个错误,
未处理的运行时错误:Bootstrap的JavaScript需要jQuery
调用堆栈/js/bootstrap. min. js(6:37)
但有趣的是,在浏览器的检查元素中,文件被加载。x1c 0d1x的数据
有没有解决这个问题的方法:(

luaexgnf

luaexgnf1#

默认情况下,脚本组件加载策略是在交互式之后,但在您的情况下,jQuery需要在交互式之前首先加载它,因此您的代码将像这样

<Script src="assets/js/jquery-3.6.0.min.js" strategy="beforeInteractive"></Script>

字符串
参考:https://nextjs.org/docs/pages/api-reference/components/script

相关问题