如何在Create React App中修改react-unity-webgl的JS文件MIME类型

问题场景 #

在Windows环境下使用Create React App运行项目，通过react-unity-webgl加载Unity WebGL构建包时，网络面板显示loader.js文件的MIME类型被识别为text/html，导致文件无法正常执行，触发以下报错：

expected expression, got '<'
The script from “http://localhost:3000/game/samplegame/unity/samplegame/Build/samplegame.loader.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

使用的React组件代码：

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

const Samplegame = () => {
    const { unityProvider } = useUnityContext({
        loaderUrl: "unity/samplegame/Build/samplegame.loader.js",
        dataUrl: "unity/samplegame/Build/samplegame.data.gz",
        frameworkUrl: "unity/samplegame/Build/samplegame.js.gz",
        codeUrl: "unity/samplegame/Build/samplegame.wasm.gz",
    });

    return (
        <div>
            <h2>Sample Game</h2>
            <Unity unityProvider={unityProvider} style={{ width: "960px", height: "600px" }} />
        </div>
    );
};

export default Samplegame;

曾尝试用react-app-rewired修改Webpack配置，但未解决问题，config-overrides.js代码如下：

const { override, addWebpackPlugin } = require('customize-cra');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = override(
    addWebpackPlugin(
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'public/unity'),
                    to: path.resolve(__dirname, 'build/unity'),
                    transform(content, filePath) {
                        if (filePath.endsWith('.js')) {
                            return Buffer.from(content.toString().replace(/text\/plain/g, 'application/javascript'));
                        }
                        return content;
                    },
                },
            ],
        })
    )
);

解决方案 #

1. 修正资源路径为绝对路径 #

报错中的请求路径是http://localhost:3000/game/samplegame/unity/samplegame/Build/samplegame.loader.js，但组件里配置的是相对路径unity/samplegame/Build/...。如果当前组件挂载在/game/samplegame路由下，相对路径会被解析为嵌套的game/samplegame/unity/...，导致请求的文件不存在，服务器返回404页面（HTML），因此MIME类型显示为text/html。

将所有资源路径改为以/开头的绝对路径：

const { unityProvider } = useUnityContext({
    loaderUrl: "/unity/samplegame/Build/samplegame.loader.js",
    dataUrl: "/unity/samplegame/Build/samplegame.data.gz",
    frameworkUrl: "/unity/samplegame/Build/samplegame.js.gz",
    codeUrl: "/unity/samplegame/Build/samplegame.wasm.gz",
});

确保Unity构建包已放置在项目的public/unity目录下，CRA开发服务器会自动托管该目录下的静态文件。

2. 移除无效的Webpack配置 #

之前的config-overrides.js中尝试替换文件内容的操作完全无效，因为MIME类型错误的根源不是文件内容，而是请求路径错误导致返回HTML页面。此外，CopyWebpackPlugin在开发环境中不会生效，CRA默认会从public目录托管静态资源，无需额外配置拷贝。

如果没有其他Webpack定制需求，直接删除config-overrides.js，恢复CRA默认配置即可。

3. 验证静态资源存在性 #

确认public/unity/samplegame/Build目录下存在所有需要的文件：samplegame.loader.js、samplegame.data.gz、samplegame.js.gz、samplegame.wasm.gz。重启开发服务器后刷新页面，查看网络面板，确认这些文件的返回状态为200，且MIME类型符合预期：

• .js文件：application/javascript
• .gz文件：application/gzip
• .wasm文件：application/wasm

内容的提问来源于stack exchange，提问作者Hans Joseph Himawan