React项目使用react-helmet引入Jquery等外部脚本无效的问题求助

1. 初始报错 "Uncaught SyntaxError: Unexpected token '<'"：是因为你引用的静态脚本路径错误，React开发服务器找不到对应资源时会返回404 HTML页面，浏览器尝试将HTML内容作为JS解析，就会识别到HTML开头的<字符抛出语法错误。
2. 脚本不运行的问题：你给普通原生JS脚本添加了type="text/babel"属性，这个属性是标记脚本为需要Babel转译的JSX代码，浏览器不会直接执行这类脚本，所以jQuery、Bootstrap等依赖原生JS运行的库自然无法生效。

推荐优先使用npm安装依赖的方式引入，兼容性和可维护性更好，也可以选择静态脚本引入的方式。

方案1：npm安装依赖（推荐） #

1. 执行命令安装对应包：

npm install jquery bootstrap@4 popper.js owl.carousel

如果使用Bootstrap5则安装：

npm install jquery bootstrap @popperjs/core owl.carousel

2. 在App.js顶部引入依赖，需要全局使用jQuery的话手动挂载到window对象：

import $ from 'jquery'
window.$ = window.jQuery = $
import 'bootstrap'
import 'owl.carousel'
// 其他CSS已经通过import引入的不需要改动

3. 第三方jQuery插件的初始化逻辑放在useEffect中执行，确保React组件渲染完成后再操作DOM：

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // 执行所有初始化逻辑，比如轮播、计数器等插件初始化
    $('.owl-carousel').owlCarousel()
    $('.counter').counterUp()
    // 其余custom.js、theme.js中的初始化逻辑都可以放在这里执行
  }, [])

  // 原有返回渲染的代码不变
}

方案2：静态脚本引入 #

如果你一定要使用本地存放的JS脚本文件，按以下步骤操作：

1. 将所有静态JS文件从src/assets/js目录移动到项目根目录的public/js文件夹下，只有public目录下的资源才能被作为静态文件直接访问。
2. 不要用Helmet引入脚本，直接修改public/index.html，在</body>标签前按依赖顺序添加script标签，不要加type="text/babel"属性：

<!-- 注意jQuery必须放在所有依赖它的脚本最前面 -->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/stellar.js"></script>
<script src="/js/custom.js"></script>
<!-- 剩下的所有脚本按依赖顺序依次添加 -->

3. 同样把依赖DOM的初始化逻辑放在App组件的useEffect中执行，避免DOM还没渲染就执行脚本导致初始化失败。

• 所有依赖jQuery的脚本必须放在jQuery之后加载，否则会报$ is not defined错误。
• 尽量不要直接用jQuery修改React管理的DOM，避免虚拟DOM和真实DOM不一致导致的视图异常。
• 如果使用React18+的严格模式，useEffect会执行两次，初始化第三方插件时要添加销毁逻辑，避免重复初始化报错。

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