在ReactJS项目中导入Unity WebGL构建时出现报错问题

控制台报错信息：

Uncaught SyntaxError: Unexpected token '<' (at 8490a1a1-bf79-475c-a429-4588078be1fb:1:1)

react_devtools_backend.js:4026 Unable to parse /ddd.framework.js! The file is corrupt, or compression was misconfigured? (check Content-Encoding HTTP Response Header on web server)

目录结构说明：Unity构建文件位于client目录，React项目的index.html在public目录下，相关React代码如下：

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "build/ddd.loader.js",
    dataUrl: "build/ddd.data",
    frameworkUrl: "build/ddd.framework.js",
    codeUrl: "build/ddd.wasm",
  });

  return <Unity unityProvider={unityProvider} />;
}

解决方法 #

• 修正资源请求路径
  控制台的Unexpected token '<'错误，本质是请求Unity资源时返回了HTML内容（通常是404页面或首页），说明路径配置错误。
  你的构建文件在client目录，但React的public是静态资源的根目录，可通过以下方式调整：

  • 方案1：将client下的build文件夹移动到public目录内，保持现有路径配置不变；
  • 方案2：修改useUnityContext中的路径为绝对路径，指向client目录下的构建文件：

    loaderUrl: "/client/build/ddd.loader.js",
    dataUrl: "/client/build/ddd.data",
    frameworkUrl: "/client/build/ddd.framework.js",
    codeUrl: "/client/build/ddd.wasm",
    

• 检查服务器压缩配置
  第二个错误提示ddd.framework.js解析失败，需确认服务器的Content-Encoding响应头配置：

  • 如果Unity构建时开启了Gzip/Brotli压缩，要确保服务器已正确配置对应压缩规则，返回的Content-Encoding头与文件压缩格式匹配；
  • 若不确定压缩配置，可暂时关闭Unity构建时的压缩选项，重新构建后测试。

• 验证构建文件完整性
  重新执行Unity的WebGL构建，确保所有产物文件（loader.js、data、framework.js、wasm）完整复制到项目对应目录，没有文件缺失或损坏。

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