How to change a Javascript MIME type from text/html to application/js in Create React App (react-unity-webgl)?

I am trying to load a Unity Webgl build in my react component using react-unity-webgl. However, the MIME type of the loader.js file is text/html when I open the networks panel. Therefore, the loader.js file won't run as it's considered an HTML file. I am running on a Windows development server using create react app.

The error shows:

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 Component:
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;

I tried using react-app-rewired to adjust the Webpack configuration, but it doesn't make a difference.

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;
                    },
                },
            ],
        })
    )
);

The issue you're encountering typically arises because the development server isn't correctly serving your Unity WebGL build files. This often happens when the server fails to find the requested files and returns an HTML error page (e.g., 404 Not Found) instead of the expected JavaScript file, causing the browser to interpret the MIME type as text/html.

Here's a step-by-step guide to address this issue:

Step 1: Verify File Paths Ensure that your Unity WebGL build files are correctly placed in the public directory of your Create React App project.

Step 2: Correct Webpack Configuration Your config-overrides.js file looks mostly correct, but let's make sure the paths and transformations are properly set. Since Create React App serves files from the public directory directly, you don't need to copy them over during the build. Instead, ensure that your Unity WebGL build files are directly in the public/unity/samplegame/Build directory.

Update your config-overrides.js to adjust MIME types if necessary, but this shouldn't be needed if files are placed correctly:

Step 3: Verify MIME Types in Development Server Create React App uses Webpack Dev Server for development, which typically handles MIME types correctly. However, you can create a custom server if needed.

If you are deploying your React app to a different server, make sure that the server is configured to serve JavaScript files with the correct MIME type.

Step 4: Handling Gzipped Files Make sure your development server is configured to serve gzipped files correctly. In a production setup, ensure your server is set up to handle gzip compression and respond with appropriate headers.

Step 5: Final Check Ensure that your Unity WebGL files are correctly referenced in your React component

Following these steps should resolve the MIME type issue and allow your Unity WebGL build to load correctly in your React component.