[Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

[perry]

Last updated by Netlify Support: October 2024

Are you struggling to understand why your project runs locally but errors out with missing files or logs that point toward issues with case when you try and build on Netlify? You are not alone. Often, case (as in: UPPERCASE or lowercase letters in filenames or paths) can cause problems. Here is a guide to understanding how case sensitivity issues present themselves, why they arise, and how you can fix them!

1. Errors you might see

Case sensitivity issues can be frustrating to debug because sometimes you’ll receive error messages letting you know that files could not be found when they are clearly present during the build process. See this post for a great example:

Netlify deployment is failing despite all scripts running perfectly fine locally

I’m having issues with one of my sites. The build seems to be failing on an import line in one of my JS files, but running all the same commands locally, I don’t have any issues… I don’t know how to debug why Netlify is failing. The site is built using Svelte and Sapper, and I was initially getting the following error: ‘svelte-icons/fa/FAPenFancy.svelte’ is imported by src/components/features.js, but could not be resolved – treating it as an external dependency svelte-icons is a package that …

Sometimes you might just have a failing build without any useful error messaging as it depends on which file has the issue.

2. Why does this happen?

If you work on Windows or OSX (mac), you are working on a case-insensitive system. The file system used in Netlify builds is case sensitive, while your local environment is not. Unfortunately, the error messages that result may not clearly indicate this!

Meaning: if your code includes a file or reference to a file like jQuery/jquery.js — the Netlify build may fail due to the mixed case filename. This issue can be present with ANY file that is an important part of your project, including, but not limited to:

• entry-point application files like App.js or Main.js (not the same as app.js or main.js)
• partials, modules, imports, templates
• dependencies, packages
• font files
• image, css and json files
• netlify.toml, _redirects, package.json, Gemfile or any other config or settings files
• …anything!

This issue also happens regardless of where the case sensitivity occurs. To be really clear, during the build step:

somefile.js != someFile.js != SomeFile.js != SOMEFILE.js != sOmEfIlE.js

We strongly recommend that you pay very close attention to how you use case from the very beginning in your project, and standardize how you use case throughout so you don’t have problems during the build step on Netlify.

3. How can I fix these problems?

If you haven’t committed your files to version control (we are assuming you are using Git) then it is sufficient to simply rename the file(s) in question and the problem should fix itself.

That said, most people realize they are having a case issue when they try and build on Netlify, as the problem doesn’t occur locally. This almost always means that the file(s) have been committed to Git and pushed to a provider such as GitHub. Simply renaming the file and re-committing and pushing it does not generally work because Git’s default setting is to ignore case, and so those changes aren’t always registered.

This thread on Stack Overflow has lots of useful approaches on how to deal with this. We have also found that the following steps will do the trick:

1. deleting the file
2. committing and pushing to GitHub
3. re-creating the file
4. adding, committing, pushing to GitHub

As soon as the case issue is resolved, you should see any problems related to this vanish and enjoy smooth, problem free builds on our platform

If you are still having issues after fixing the case related issues, this Support Guide contains many other troubleshooting steps for common concerns! Good luck & please comment below if you have additional thoughts!

[bsgreenb]

If you’re using TypeScript, would recommend setting this in your tsconfig.json:

“forceConsistentCasingInFileNames”: true,

[AntonioRiccelli]

Hey @perry,
Thank you for this, as it clarifies some doubts. I seem to have stumbled upon this problem for the first time.
What I don’t understand is, why does it only seem to happen on certain occasions? For example, when deploying a specific app, and not another one, even though they share the same naming conventions?

[perry]

hi antonio,

all apps should have the same restrictions - i.e our systems are always case sensitive, and mac/windows operating systems will always be insensitive. therefore, the best option is to choose one naming convention and stick with it. making everything lowercase seems to work for most people!

[thinkdigitalzw]

Hi, so there are many solutions to this case sensitivity problem with how github handles it.

In my case I had changed the filename casing convention from uppercase to lowercase. I do believe that git is able to track the change but however this command
git config core.ignorecase false dictates how git operates behind the scenes

In my case I ran the command and git suddenly had lots of files to track labelled untracked.

I then hit git add. , then git commit and ran my build on netlify one more time.

Then all errros now displayed could be traced e.g
Module not found: Can't resolve './Components/ProductRightSide' in '/opt/build/repo/components/products and fixed such that git was able to track and implement the changes successfully.

Its quite a work around and a finger nail away from frustration but trust me this will surely work.

PS : after fixing your issue you may want to run the command
git config core.ignorecase true to restore how git works with case sensitivity.

Also note git config core.ignorecase false has issues with other file name extensions so you may want to watch out , do it if you know what you’re doing and sure of it.

Here’s the stack overflow thread I got my solution from

[IamSoPrada]

Thanks a lot! Spent 2 days trying to understand what’s the problem was. I appreciate your solution.

[hillary]

Glad this was helpful for you, @IamSoPrada. Happy building

[slubz]

I spent a lot of time trying to fix it but it still doesn’t work Example: “https://example.com/home/ExaMpLe.html” but when i access the link, the website link automatically lowercase like :“https://example.com/home/exanple.html” please someone help me, I’m a newbie and please explain in short and easy to understand.

[hrishikesh]

The above post is not related to your query. We’re talking about case sensitivity during builds. You’re asking about case sensitivity during site serving. Netlify normalises all URLs to lowercase, so what you’re looking for is not possible.

[kennyfully88]

I can confirm that this worked for me, as I was a rebel and changed the entire naming convention of my vue related project. I was nearly in tears trying to get things to work in production. Thank you very much for this. May God bless you.

[SamO]

Hi @kennyfully88 , Welcome to the forums! Thanks for coming back and letting us know what worked for you. We appreciate the feedback.

[DavonW]

This worked for me. Thanks a bunch!

[c0ncentus]

I feel depressed how netlify made thing a lot complex when comes simplicity …
I think about to change now …

[mrdo]

Hello.
I am having trouble deploying directly from my github repository. I deploy the same project manually and it works perfectly fine, without any complications. Is the case sensitivity only tied to deploying from github?

[SamO]

Hey there

Welcome to the Netlify Forums and thanks so much for reaching out! Have you tried relinking/unlinking your repo? You should be able to unlink your github repo in your UI now,.

Can you try the following steps and see fi that helps:

1. Unlink the account here: Netlify App .
2. Log out of the wrong github account on the github site
3. Log in to the correct github account
4. Once active in the correct account, link again

Let me know if that works!