1

I have an issue with making builds using react-app-rewired which I'm not really sure how to resolve. Currently I make builds in my project using react-app-rewired build, with no custom Webpack overrides. This leads to one of three scenarios:

  1. On my local machine (Windows 10), Webpack will take all the assets (images, fonts, svgs) from my src/assets and copy them into build/static/media as expected. No changes to file-name case.
  2. I use Netlify for deploying testing builds. When this builds, it does the same as above but changes all the asset names to lowercase. I believe this is due to the build running on some Linux OS. I have no issues with my Netlify deployment, and all assets load fine.
  3. For the final part of the project, I'm downloading builds from Netlify and sending them to another team, who hosts them on their own webserver. I believe their webserver is Apache, running on some Linux OS as well. When they run the app, some of the assets fail to load (404 not found).

I've narrowed this down to an issue with case sensitivity. The assets are present, but, for example, my font is named LEMONMILK.woff locally and is renamed by webpack to lemonmilk.[hash].woff during the build on Netlify. While Webpack does go through my CSS and adds in the correct hash string, it leaves the url as LEMONMILK.hash.woff. This leads to a 404 file not found on the Apache server (but not Netlify, which baffles me).

I figure my options are:

  • Prevent Webpack from converting my assets to lowercase during builds (I'm honestly not sure this is possible though, I've tried a few things)
  • Find a file loader that correctly converts my CSS URLs to lowercase so that everything lines up regardless of OS.
  • Manually rename all my offending assets (I'd prefer to avoid this, as it's not a very future-proof option)
  • Fix the issue on the Apache webserver (I'd also prefer to avoid this, as I'd prefer the project runs regardless of the server)
  • Other?

Any ideas what the best approach here would be, and how I would go about it? I've run into a few dead ends so far. Thanks.

Will Bagley
  • 165
  • 3
  • 13

0 Answers0