2023年在Next.js中添加第三方脚本遇错，求解决方法

针对你遇到的嵌入第三方预订脚本报错问题，以下是几个可行的解决思路：

方案一：使用Next.js官方推荐的next/script组件（优先推荐） #

Next.js 11+提供的next/script组件专门用于处理第三方脚本加载，能自动处理SSR/CSR环境下的脚本加载时机，避免DOM操作错误。

import Script from 'next/script'

export default function ReservationPage() {
  return (
    <>
      <div id='bro_reservation'></div>
      <input type='hidden' id='cid' value='nVl0nR9tAGBmFccxf4xvDg%3d%3d' />
      <input type='hidden' id='dbaid' value='L4JAaOi0gExXw5xek9dmgQ%3d%3d' />
      
      {/* 指定afterInteractive策略，确保DOM元素渲染后再加载脚本 */}
      <Script
        src="https://bookridesonline.com/web/reservation.js"
        strategy="afterInteractive"
        onLoad={() => {
          console.log('预订脚本加载完成')
        }}
      />
    </>
  )
}

方案二：在客户端组件中用useEffect手动插入脚本 #

如果需要更灵活的控制，可借助useEffect在客户端环境下插入脚本，避免SSR阶段的DOM操作冲突：

import { useEffect } from 'react'

export default function ReservationPage() {
  useEffect(() => {
    // 避免重复插入脚本
    if (document.getElementById('bro-reservation-script')) return

    const po = document.createElement('script')
    po.id = 'bro-reservation-script'
    po.type = 'text/javascript'
    po.async = true
    po.src = 'https://bookridesonline.com/web/reservation.js'
    
    const firstScript = document.getElementsByTagName('script')[0]
    firstScript.parentNode.insertBefore(po, firstScript)

    // 组件卸载时清理脚本（可选）
    return () => po.remove()
  }, [])

  return (
    <>
      <div id='bro_reservation'></div>
      <input type='hidden' id='cid' value='nVl0nR9tAGBmFccxf4xvDg%3d%3d' />
      <input type='hidden' id='dbaid' value='L4JAaOi0gExXw5xek9dmgQ%3d%3d' />
    </>
  )
}

方案三：修正_document.js的脚本加载方式 #

如果之前修改_document.js无效，大概率是脚本执行时机不对，需确保等待DOM完全加载后再初始化脚本：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          type='text/javascript'
          dangerouslySetInnerHTML={{
            __html: `
              (function () {
                // 等待DOM内容加载完成后再插入脚本
                window.addEventListener('DOMContentLoaded', () => {
                  const po = document.createElement('script');
                  po.type = 'text/javascript';
                  po.async = true;
                  po.src = 'https://bookridesonline.com/web/reservation.js';
                  const firstScript = document.getElementsByTagName('script')[0];
                  firstScript.parentNode.insertBefore(po, firstScript);
                });
              })();
            `
          }}
        />
      </body>
    </Html>
  )
}

关键排查点 #

1. 确保脚本加载时，bro_reservation、cid、dbaid三个DOM元素已经存在于页面中，第三方脚本通常依赖这些元素初始化。
2. 打开浏览器控制台查看具体报错信息（如元素找不到、脚本加载失败等），针对性调整方案。

内容的提问来源于stack exchange，提问作者Chris Ware Codes