[BUG] Images are loaded incorrectly in production

[xiaohai-huang]

Description

Images load correctly during development, but when the React app is served from the Resources folder, incorrect images are displayed due to identical file names with different extensions.

Steps to Reproduce

1. Import two images with identical file names but different file extensions from separate folders.

import PlaceholderAvatar from "src/assets/images/icons/default-avatar.png";
import PlayerAvatar from "src/assets/images/default-avatar.jpg";

2. Build the react app. Below shows the files are all stored under /static/media/ folder.

3. ResourcesHelper.LoadResource is unable to load the correct image.

Potential Cause

Currently, the files in Resources folder are loaded without file extension.

https://github.com/ReactUnity/core/blob/fef8c873b41af0922c3cffe6e98d37dc0efee34f/Runtime/Types/AssetReference.cs#L168-L188

https://github.com/ReactUnity/core/blob/fef8c873b41af0922c3cffe6e98d37dc0efee34f/Runtime/Helpers/ResourcesHelper.cs#L55-L63

[xiaohai-huang]

My current workaround is to either change the file names or specify the assetModuleFilename in webpack config using webpack-merge.

const { merge } = require("webpack-merge");

module.exports = (env, baseConfig) => {
  const config = merge(baseConfig, {
    output: {
      assetModuleFilename: "static/media/[name].[hash][ext]",
    },
  });

  return config;
};

[KurtGokhan]

In the new version of @reactunity/scripts package, extension names will be added to the end of the file names to avoid name collisions, because Unity ignores extensions in Resources.