Как загрузить скрипт после загрузки Jquery в next.js

#javascript #node.js #reactjs #next.js

Вопрос:

Я хочу загрузить пользовательский скрипт перед инициализацией jquery, потому что jquery инициализируется в компоненте компоновки, и я загружаю скрипт в компонент формы, который основан на 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>
    );
}
 

Ошибка

 VM4893 wizard-2.js:201 Uncaught ReferenceError: jQuery is not defined at VM4893 wizard-2.js:201
 

Это мой файл макета, в который я загружаю все сценарии

 {/*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*/}
 

Я использую metronic версии 7
Может быть, они загружают jquery в плагин plugins.bundle.min.js* файл

Комментарии:

1. Правильно ли я понял ваш вопрос, вы хотите загрузить jQuery перед загрузкой скрипта? Вы рассматривали возможность добавления его в пользовательский документ? nextjs.org/docs/advanced-features/custom-document