[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.

core/Runtime/Types/AssetReference.cs

Lines 168 to 188 in fef8c87

	protected virtual T Get<T>(ReactContext context, AssetReferenceType realType, object realValue) where T : class
	{
	switch (realType)
	{
	case AssetReferenceType.Resource:
	return ResourcesHelper.LoadResource<T>(realValue as string);
	case AssetReferenceType.Global:
	if (context.Globals.TryGetValue(realValue as string, out var res)) return res as T;
	else return default;
	case AssetReferenceType.Object:
	return realValue as T;
	case AssetReferenceType.File:
	case AssetReferenceType.Url:
	case AssetReferenceType.None:
	case AssetReferenceType.Procedural:
	case AssetReferenceType.Data:
	default:
	return null;
	}
	}

core/Runtime/Helpers/ResourcesHelper.cs

Lines 55 to 63 in fef8c87

	public static T LoadResource<T>(string path, bool excludeExtension = true) where T : class
	{
	if (string.IsNullOrWhiteSpace(path)) return default(T);
	if (!typeof(Object).IsAssignableFrom(typeof(T))) return default(T);
	if (excludeExtension) path = GetResourcePathWithoutExtension(path);
	return Resources.Load(path, typeof(T)) as T;
	}

[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.