Shopify Hydrogen嵌入Bokun第三方预订组件时type属性不匹配问题求助

问题原因 #

Bokun的Loader脚本在客户端运行时，可能动态修改了服务端渲染的<script>标签的type属性，或者插入了新的application/ld+json类型脚本，导致React Hydrate时服务端与客户端的DOM属性不匹配，触发警告。

解决思路 #

1. 直接手动渲染组件（推荐） #

放弃使用dangerouslySetInnerHTML，在React组件中直接声明脚本和容器元素，确保服务端与客户端初始渲染的DOM结构一致：

export default function BokunGiftCard() {
  return (
    <>
      <script
        type="text/javascript"
        src="https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=XXXXX"
        async
      />
      <div className="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX" />
    </>
  );
}

React只会校验初始渲染的DOM匹配，后续脚本动态修改的内容不会触发hydrate警告。

2. 客户端动态加载脚本 #

通过useEffect在组件挂载后再添加Bokun的脚本和容器，避免服务端渲染相关元素：

import { useEffect, useRef } from 'react';

export default function BokunGiftCard() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 创建并添加Loader脚本
    const loaderScript = document.createElement('script');
    loaderScript.type = 'text/javascript';
    loaderScript.src = 'https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=XXXXX';
    loaderScript.async = true;

    // 创建组件容器
    const widgetDiv = document.createElement('div');
    widgetDiv.className = 'bokunWidget';
    widgetDiv.dataset.src = 'https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX';

    containerRef.current.append(loaderScript, widgetDiv);
  }, []);

  return <div ref={containerRef} />;
}

3. 使用Remix的ClientOnly组件 #

让服务端不渲染Bokun相关内容，仅在客户端渲染，彻底避免hydrate不匹配：

import { ClientOnly } from '@shopify/hydrogen';

export default function BokunGiftCard() {
  return (
    <ClientOnly fallback={<div>加载中...</div>}>
      {() => (
        <>
          <script
            type="text/javascript"
            src="https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=XXXXX"
            async
          />
          <div className="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX" />
        </>
      )}
    </ClientOnly>
  );
}

4. 排查Bokun脚本行为 #

如果以上方法无效，可查看Bokun Loader脚本的具体逻辑：

• 确认是否存在修改原有<script>标签type属性的代码
• 检查是否自动插入了application/ld+json类型的结构化数据脚本
  针对具体行为调整渲染方式，比如如果是插入新脚本，可忽略警告；如果是修改原有标签，则必须改用客户端动态加载。

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