multi page react web app .jpg and .ttf files not rendering on amplify

[Asadimran123]

Before opening, please confirm:

• [x] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Version

v6

Amplify Categories

hosting

Backend

Other

Environment information

# Put output below this line
System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M2
    Memory: 87.59 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 21.6.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 123.0.6312.124
    Safari: 15.6.1
  npmPackages:
    @types/react: ^18.2.43 => 18.2.51 
    @types/react-dom: ^18.2.17 => 18.2.18 
    @typescript-eslint/eslint-plugin: ^6.14.0 => 6.20.0 
    @typescript-eslint/parser: ^6.14.0 => 6.20.0 
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    autoprefixer: ^10.4.18 => 10.4.18 
    axios: ^1.6.8 => 1.6.8 
    eslint: ^8.55.0 => 8.56.0 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
    eslint-plugin-react-refresh: ^0.4.5 => 0.4.5 
    flowbite-react: ^0.7.2 => 0.7.2 
    localforage: ^1.10.0 => 1.10.0 
    match-sorter: ^6.3.4 => 6.3.4 
    nanoid: ^5.0.6 => 5.0.6 (3.3.7)
    postcss: ^8.4.35 => 8.4.35 (8.4.31)
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-router-dom: ^6.22.2 => 6.22.2 
    sort-by: ^0.0.2 => 0.0.2 
    tailwindcss: ^3.4.1 => 3.4.1 
    typescript: ^5.2.2 => 5.3.3 
    vite: ^5.0.8 => 5.0.12 
  npmGlobalPackages:
    @types/node: 20.11.17
    corepack: 0.24.0
    jshint: 2.13.1
    n: 9.2.0
    npm: 10.2.4
    ts-node: 10.9.2
    typescript: 5.3.3

Describe the bug

I downloaded some custom fonts (.ttf) and images from online and have them stored as assets on my react app that is hosted on amplify. the fonts and images show on localhost but not on the amplify domain. any ideas as to how i can fix this.

ive tried adding the redirect below but it still isnt working (from https://github.com/aws-amplify/amplify-hosting/issues/2849)

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

Expected behavior

On my machine the fonts and images load correctly however they do not render on the amplify site.

Reproduction steps

1. host multi page react app(react-router-dom)on amplify
2. set redirect </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/> 200 redirect /index.html

Code Snippet

// Put your code below this line.

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

[Asadimran123]

As I stated, i've see then other issue posted but i have tried to reproduce it with those steps but it is still not working.

[cwomack]

Hello, @Asadimran123 👋. Not sure why this behavior would be experienced just yet, but have a few things for you to try while we dig deeper. Can you see if imported the assets directly (if you haven't already) helps with this? For example, something along the lines of:

import logo from './logo.png';

<img src={logo} alt="Logo" />

Also, the order of the redirects may be something to review as well. Redirects are executed from the top of the list down, so can you verify if changing the order of them makes any impact?

[cwomack]

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!