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

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:

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. :confused:

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 :tada:

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!

Build fails on Netlify, works locally
Gatsby site deploy failed
Netlify build failed with webpack error - css-syntax-error (unknown word)
Gatsby Build fails on netlify for website with many images - WebpackError: TypeError: Cannot read property 'childImageSharp' of null
Style changes after deploying react app
Typescript build error for missing modules or types declaration
React Deploy Failed @ npm run build error code ELIFECYCLE errno 1 Cannot find file
React Component is not rendering after deploying to Netlify
Local NPM dependency in package.json not installing
Deploys keep failing?
Gatsby and Sass Config - Fails during build
React Deploy Failed @ npm run build error code ELIFECYCLE errno 1 Cannot find file
Netlify can't find react-bootstrap/Navbar
Gatsby fails on netlify, build locally
Gatsby Build failed
Extra component gets rendered but after refresh it doesn't show
Page Header Not Loading...Netlify issue?
Publication names shown in lowercase
Deploy fails with "Cannot find module 'firebase-admin' " even though module is in the function's package.json
Hugo blog deployment failed
Gatsby builds local, but fails on Netlify
Deploying seems stuck forever on build
[React ssr via functions]Unexpected token error
Module not found: Error: Can't resolve
"This dependency was not found:" error when deploying simple Vue site
Status 404 () when submit form using react.js stateful component
Deploy Failed confusion
Deploy failed Hugo
Site looking all wrong
Gatsby Site Can't Resolve
Cannot find file...' error when building, case sensitive issue
Hugo Partial Not Rendering Once Deployed to Netlify
Vue app deploy error
Menu in config for Hugo is not working
Deployment error advice
Deployment Failed - Error Generating JavaScript bundles failed
Gatsby Wordpress CMS deploying build issue
Site coded in React works in localhost but strips CSS in Netlify prod
Gridsome <g-image> images are blurry after build and deploy
Cannot find file problem
Project builds locally but get "WebpackError: TypeError: Cannot read property 'childImageSharp' of null" with Netlify
Site with react-bootstrap fails during deploy
Error running command: Build script returned non-zero exit code: 127
Deploy fails during stage ‘building site’
Some UX/UI features of my live site renders differently than on my local environment
Gatsby site fails to build on Netlify, but works locally
Nuxt Generate Breaking Build
Webpack react js in netlify
HELP Works locally, worked on Netlify but suddenly stoppen
Unable to build, build failing
Local build was successful but build at Netlify is not working
Build Failure: The path passed to gatsby-source-filesystem does not exist on your file system
JS bundle failure
URL is not working
Deploy failed-Error: ENOENT: no such file or directory, open '/opt/build/repo/src/index.js'
Image gets 404 in preview build
Trying to request my privacy policy page generates an error
Build script returned non-zero exit code: 1
GraphQL...unix error: No such file or directory
Not able to see changes to the deployed site
Error during build Angular App
Deployment fails due to filename cases
Nuxt production build differs from staging
[Support Guide] I’ve deployed my site but I still see "Page not found”
Site fails to Deploy
React Component is not rendering after deploying to Netlify
Page not found for route "/login"
Module not found: Error: Can't resolve in view
Can't resolve 'react-icons/Si' in '/opt/build/repo/src/pages
Issue with deploy

2 posts were merged into an existing topic: Hugo Partial Not Rendering Once Deployed to Netlify

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

“forceConsistentCasingInFileNames”: true,

1 Like