I'm creating an app with nextJs, query I need to use jQuery and some files with jQuery code, so I'm adding it using the Head from nextjs, I put the jQuery include first and then my own file but, sometimes it seems as my code is loading before the jQuery code is fully loaded resulting in jQuery not found when my code try to execute:
This is my Head file
import React from 'react'
import { Header } from './'
import Head from 'next/head'
const Layout = () => {
return (
<>
<Head>
<title>Create Next App</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
<link rel="stylesheet" href="/static/css/style.min.css" />
<link rel="stylesheet" href="/static/vendor/fontawesome-free/css/all.min.css" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/static/js/plugins.min.js"></script>
<script type="text/javascript" src="/static/js/plugins/isotope-docs.min.js"></script>
<script type="text/javascript" src="/static/js/main.js"></script>
<link rel="icon" href="/favicon.ico" />
<link href="https://api.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css" rel="stylesheet" />
</Head>
<div class="page-wrapper">
<Header />
</div>
</>
)
}
export { Layout }
Sometimes it works as a charm, sometimes I get this:
bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.bundle.min.js:6
at bootstrap.bundle.min.js:6
at bootstrap.bundle.min.js:6
at bootstrap.bundle.min.js:6
and sometimes this:
Uncaught TypeError: Cannot read property 'each' of undefined
at plugins.min.js:1
at plugins.min.js:1
(anonymous) @ plugins.min.js:1
(anonymous) @ plugins.min.js:1isotope-docs.min.js:32 Uncaught ReferenceError: $ is not defined
at isotope-docs.min.js:32
at isotope-docs.min.js:32
(anonymous) @ isotope-docs.min.js:32
(anonymous) @ isotope-docs.min.js:32main.js:754 Uncaught ReferenceError: jQuery is not defined
at main.js:754
What can I try to fix this?