NextJS React中Bouncer.js提示未定义的问题求助

问题描述 #

项目基于NextJS 10.0.6（React 17.0.1），尝试集成Bouncer.js表单验证，页面中脚本引入代码如下：

<script src="/static/bouncer.min.js" async=""></script>
<script src="/static/bouncerLoad.js" async=""></script>
</body>

bouncerLoad.js内容：

var validate = new Bouncer('contactform');
console.log("bouncer loaded");

运行时触发错误：

Unhandled Runtime Error

ReferenceError: Bouncer is not defined

解决建议 #

• 移除async属性，保证脚本加载顺序
  async会让脚本异步并行加载，无法保证bouncer.min.js在bouncerLoad.js之前执行，导致初始化时Bouncer还未定义。修改后的脚本引入：

  <script src="/static/bouncer.min.js"></script>
  <script src="/static/bouncerLoad.js"></script>
  </body>
  

• 监听脚本加载完成事件，确保依赖就绪
  如果需要保留异步加载逻辑，可在bouncerLoad.js中监听页面就绪事件，或通过脚本加载回调触发初始化：
  方式1：修改bouncerLoad.js

  document.addEventListener('DOMContentLoaded', function() {
    if (typeof Bouncer !== 'undefined') {
      var validate = new Bouncer('contactform');
      console.log("bouncer loaded");
    }
  });
  

  方式2：调整页面脚本引入逻辑

  <script src="/static/bouncer.min.js" onload="initBouncer()"></script>
  <script>
    function initBouncer() {
      var validate = new Bouncer('contactform');
      console.log("bouncer loaded");
    }
  </script>
  </body>
  

• 检查静态文件路径是否正确
  NextJS 10的静态文件默认存放目录为/public，而非/static（旧版本兼容路径，但10.x已统一为/public）。若文件存放在/public下，需修改引用路径：

  <script src="/bouncer.min.js"></script>
  <script src="/bouncerLoad.js"></script>
  </body>
  

  同时确认bouncer.min.js确实存在于对应目录，避免因文件缺失导致脚本未加载。

• 使用NextJS官方Script组件控制加载顺序
  NextJS 10提供next/script组件，可精准控制脚本加载时机。在页面组件中引入：

  import Script from 'next/script';
  
  export default function ContactPage() {
    return (
      <>
        <form id="contactform">
          {/* 表单元素 */}
        </form>
  
        <Script src="/bouncer.min.js" strategy="afterInteractive" />
        <Script strategy="afterInteractive">
          {`
            var validate = new Bouncer('contactform');
            console.log("bouncer loaded");
          `}
        </Script>
      </>
    );
  }
  

  strategy="afterInteractive"会在页面交互就绪后加载脚本，同时保证依赖脚本优先执行。

内容的提问来源于stack exchange，提问作者dmayo