我正在使用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的数据
有没有解决这个问题的方法:(
1条答案
按热度按时间luaexgnf1#
默认情况下,脚本组件加载策略是在交互式之后,但在您的情况下,jQuery需要在交互式之前首先加载它,因此您的代码将像这样
字符串
参考:https://nextjs.org/docs/pages/api-reference/components/script