Next JS 正在加载外部脚本但不执行它们

Question

In my next app with the latest version 12.1.6, I'm trying to use bootstrap. I've added bootstrap CSS and js files from CDN to the head of pages/_app.js as below,

import '../styles/globals.css'
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
      <>
      <Head>
        <meta charset="UTF-8"/>
        <meta name="keywords" content="Ogani, unica, creative, html"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        </Head>
      <Component {...pageProps} />
      </>
   );
  }

export default MyApp 

I used bootstrap Nav as below,

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

I've noticed bootstrap CSS is loaded and executing. But its JS is loading but not executing. Because the page isn't interactive menu isn't expanding and collapsing on click. Can anyone tell me what's a problem with it?

Answer 1

 import Head from 'next/head'; const Layout = (props) => ( <div> <Head> {/* import external javascript */} <script type="text/javascript" src="..."></script> <script type="text/javascript" src="/js/myscript.js"></script> </Head> <p id="demo"></p> </div> ); export default Layout;

Answer 2

The error was occurring because React/Next DOM operations were colliding with Jquery DOM operations. By deferring the jquery operations after react/next it worked. Just used useEffct hook to do jquery. It's solved here .

Replace the IIFE in mainW.js for: // of course you perhaps want better names

function _runJQueryControls($) {
// rest of function
}

window.runJQueryControls = () => _runJQueryControls(jQuery); Inside index.js

 useEffect(() => {
    window?.runJQueryControls();
  }, []);

In next.config.js /** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: false, 
};

special thanks to icyJoseph who helped.