I am trying to incorporate inspinia dashboard to my website. all the scripts used by Inspinia is in public folder under js/plugins
in development envirenment and verecel they used to not load after navigating to a diffrenet route or refreshing the page. I implemented some solutions like: appending randome query string to the script tag : e.g :
<script src =path?foo=${Math.round( Math.random() * 100 )}> </script>
in the _app.js file
export default function MyApp({ Component, pageProps }) {
const Router = useRouter();
const appendSdkScript = () => {
let scripts =[
`/styles/js/plugins/jquery/3.1.1/jquery.min.js`,
`/styles/js/plugins/slimscroll/jquery.slimscroll.js`,
`/styles/js/plugins/metisMenu/jquery.metisMenu.js`,
`/styles/js/popper.min.js`,
`/styles/js/bootstrap.min.js`,
`/styles/js/inspinia.js`,
`/styles/js/plugins/pace/pace.min.js`,
`/styles/js/plugins/fontawesome/5.15.1/js/all.min.js`,
`/styles/js/sweetalert.min.js`
]
scripts.map((url,i)=>{
const script = document.createElement('script')
script.id = i
script.src = url
script.async = true
script.defer = true
script.crossOrigin = 'anonymous'
document.body.append(script)
console.log(script)
})
};
console.log(Router.events)
useEffect(() => {
Router.events.on("routeChangeComplete", appendSdkScript());
}, [Router.events]);
return (
<Layout>
<Component {...pageProps} />
{/* <!-- Mainly scripts --> */}
<Script
src={`/styles/js/plugins/jquery/3.1.1/jquery.min.js?foo=${Math.round(
Math.random() * 100
)}`}
strategy="beforeInteractive"
/>
<Script src={`/styles/js/plugins/slimscroll/jquery.slimscroll.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/plugins/metisMenu/jquery.metisMenu.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/popper.min.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/bootstrap.min.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
{/* <!-- Custom and plugin javaScript --> */}
<Script src={`/styles/js/inspinia.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/plugins/pace/pace.min.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/plugins/fontawesome/5.15.1/js/all.min.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
<Script src={`/styles/js/sweetalert.min.js?foo=${Math.round(
Math.random() * 100
)}`}></Script>
</Layout>
);
}
another solution was to load scripts on route events as demonstrated in the code above inside useEffect which listen to the changes in route.events
both worked in dev envirenment but not in Vercel.
I also load the script when the app starts on _document.js
class MyDocument extends Document {
// static async getInitialProps(ctx) {
// const initialProps = await Document.getInitialProps(ctx)
// return { ...initialProps }
// }
render() {
return (
<Html lang="en">
<Head/>
<link rel="stylesheet" href="../styles/css/animate.css" />
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/bootstrap.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/sweetalert.css" />
<body>
<Main />
<NextScript />
<script
src="/styles/js/plugins/jquery/3.1.1/jquery.min.js"
strategy="beforeInteractive"
/>
<script
src="/styles/js/plugins/metisMenu/jquery.metisMenu.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/plugins/slimscroll/jquery.slimscroll.min.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/popper.min.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/bootstrap.min.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/jquery.slimscroll.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/inspinia.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/plugins/pace/pace.min.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/plugins/fontawesome/5.15.1/js/all.min.js"
strategy="beforeInteractive"
></script>
<script
src="/styles/js/sweetalert.min.js"
strategy="beforeInteractive"
></script>
</body>
</Html>
)
}
```