如何在React/Gatsby项目中正常加载使用自定义JS模板文件？

根因分析 #

你遇到的是Gatsby开发模式下的Hydration不匹配问题：

• Gatsby开发模式会先输出服务端渲染的静态HTML，之后客户端React执行hydration操作，校验服务端返回的HTML结构和客户端React虚拟DOM结构是否完全一致。
• 你的main.js中的owlCarousel初始化代码执行时机在hydration完成之前，它会修改#breaking_slider下的DOM结构（owlCarousel会自动给轮播项添加外层包裹节点、调整内部结构），导致React做hydration校验时检测到结构不匹配，抛出对应警告，同时会强制重写DOM对齐虚拟DOM，因此你一开始看到的轮播效果会消失。
• gatsby serve是生产构建后的运行模式，生产构建下不会抛出hydration警告，且渲染校验逻辑更宽松，因此不会触发DOM重写，运行正常。

解决方案 #

方案1：客户端挂载后再渲染轮播组件（最推荐，无副作用） #

给你的nav组件增加客户端渲染判断，规避服务端和客户端结构不一致的问题：

import { useEffect, useState } from 'react'

const Nav = () => {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return (
    <section className="top-bar transparent">
        <div className="container">
            <div className="row">
                <div className="col-md-12 align-self-center">
                    <div className="ts-breaking-news clearfix">
                        <h2 className="breaking-title float-left">
                            <i className="fa fa-bolt"></i> Breaking News :
                        </h2>
                        {isClient && (
                          <div className="breaking-news-content owl-carousel float-left" id="breaking_slider">
                              <div className="breaking-post-content">
                                  <p>
                                      <a href="./">Netcix cuts out the chill with an integrated personal trainer on running.</a>
                                  </p>
                              </div>
                              <div className="breaking-post-content">
                                  <p>
                                      <a href="./">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
                                  </p>
                              </div>
                              <div className="breaking-post-content">
                                  <p>
                                      <a href="/">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
                                  </p>
                              </div>
                          </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    </section>
  )
}
export default Nav

同时调整main.js的代码，把所有初始化逻辑放到jQuery的ready回调中，确保DOM完全加载后再执行：

$(document).ready(function() {
    if ($('#breaking_slider').length > 0) {
        $('#breaking_slider').owlCarousel({
            items: 1,
            loop: true,
            dots: false,
            nav: true,
            animateOut: 'slideOutDown',
            animateIn: 'flipInX',
            autoplayTimeout: 5000,
            autoplay: true,
        })
    }
    // 其余初始化逻辑也放到该回调内
})

方案2：临时关闭开发模式SSR校验（仅适合临时调试，不推荐长期使用） #

在gatsby-config.js中添加如下配置，关闭开发模式下的SSR和hydration校验：

module.exports = {
  flags: {
    DEV_SSR: false
  }
}

配置后开发模式将直接走客户端渲染，不会再抛出hydration不匹配警告。

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