Sneat主题本地脚本在React项目中报错无法运行求助

我在React项目里想直接用Sneat Bootstrap HTML主题的基础HTML和CSS（没用到官方React模板），但在index.html里引入主题的JS文件时，一直弹出Uncaught SyntaxError: Unexpected token '<'错误。

我的index.html代码： #

<!DOCTYPE html>
<html
  lang="en"
  class="light-style layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="./assets/"
  data-template="vertical-menu-template-free"
>
  <head>
    <!-- Helpers -->
    <script src="./assets/vendor/js/helpers.js"></script> <!-- error -->
    <script src="./assets/js/config.js"></script>
  </head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="./assets/vendor/libs/jquery/jquery.js"></script>  <!-- error -->
  <script src="./assets/vendor/libs/popper/popper.js"></script> <!-- error -->
  <script src="./assets/vendor/js/bootstrap.js"></script> <!-- error -->
  <script src="./assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script> <!-- error -->

  <script src="./assets/vendor/js/menu.js"></script> <!-- error -->
  <!-- endbuild -->


</body>

</html>

报错的helpers.js片段： #

(function(e, a) { for(var i in a) e[i] = a[i]; }(window, /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./js/helpers.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./js/helpers.js":
/*!***********************!\
  !*** ./js/helpers.js ***!
  \***********************/
/*! exports provided: Helpers */
/***/ (function(module, __webpack_exports__, __webpack_require__) {


-- Now some Webpack complied code in file

问题原因 #

这个错误本质是浏览器请求JS文件时，服务器返回的不是合法JS代码，而是HTML内容（比如404错误页面）。因为浏览器解析JS时遇到HTML的<标签，就会触发语法错误。核心问题是：

1. React项目的静态资源路径配置和原生HTML主题不一致，相对路径找不到文件
2. Sneat主题的JS是Webpack打包产物，直接引入会有路径依赖问题

解决方案 #

1. 正确放置静态资源 #

把Sneat主题的assets文件夹完整复制到React项目的public目录下——React会把public作为静态资源的根目录，这样所有资源才能被正确访问。

2. 修正index.html里的JS路径 #

把所有JS引用改成基于/assets的绝对路径（去掉相对路径的./），同时修正HTML注释格式：

<!DOCTYPE html>
<html
  lang="en"
  class="light-style layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="/assets/"
  data-template="vertical-menu-template-free"
>
  <head>
    <!-- Helpers -->
    <script src="/assets/vendor/js/helpers.js"></script>
    <script src="/assets/js/config.js"></script>
  </head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="/assets/vendor/libs/jquery/jquery.js"></script>
  <script src="/assets/vendor/libs/popper/popper.js"></script>
  <script src="/assets/vendor/js/bootstrap.js"></script>
  <script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

  <script src="/assets/vendor/js/menu.js"></script>
  <!-- endbuild -->
</body>
</html>

3. 验证资源可用性 #

启动React项目后，在浏览器地址栏直接访问http://localhost:3000/assets/vendor/js/helpers.js：

• 如果能看到正常的JS代码，说明路径配置正确
• 如果返回HTML页面（比如404），说明资源没放对位置，检查public/assets目录是否完整

4. 按需引入（可选） #

如果只需要某个组件的功能，不用引入全部主题JS。查看Sneat主题文档，找到对应组件依赖的最小JS文件，只引入这些文件，减少不必要的加载。

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