I want to load a custom script before jquery initialization because jquery initializes on the layout component and I load the script in the form component which is base on jquery.
import Head from 'next/head'
import Script from 'next/script'
import ClientLayout from '@/components/ClientComponents/ClientLayouts/Layout'
import CreateForm from '@/components/ClientComponents/Goals/CreateForm'
export default function Create() {
const title = "Create goal";
return (
<ClientLayout>
<Head>
<title>{title}</title>
{/* <script src="/assets/js/pages/custom/wizard/wizard-2.js"></script> I don't to want use this apporch */}
</Head>
<div className="container">
<CreateForm />
</div>
<Script
id="wizard-2-js"
src="/assets/js/pages/custom/wizard/wizard-2.js"
strategy="beforeInteractive"
/>
</ClientLayout>
);
}
Error
VM4893 wizard-2.js:201 Uncaught ReferenceError: jQuery is not defined at VM4893 wizard-2.js:201
This is my layout file where I load all Scripts
{/*begin::Global Theme Bundle(used by all pages)*/}
<script src="/assets/js/KTAppSettings.js"></script>
<script src="/assets/plugins/global/plugins.bundle.min.js"></script>
<script src="/assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
<script src="/assets/js/scripts.bundle.js"></script>
{/*end::Global Theme Bundle*/}
{/*begin::Page Vendors(used by this page)*/}
<script src="/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
{/*end::Page Vendors*/}
I am using metronic version 7 Maybe they load jquery in plugin plugins.bundle.min.js* file