4 Common errors during Netlify deployment.
Netlify Deployment - things to consider.
Introduction
I was building React projects as part of Neogcamp cohort and we faced some issues here and there while trying to deploy our projects. In this document, we will consider the common cases/errors while deploying your React project and how to fix them.
1. Page not found error
Add a redirect file to avoid this screen/error.
Here's the _redirects file to be added. Add it to the public folder.
This issue where reloading individual pages in your hosted application results in a "page not found" error.
To solve this problem, you can add a _redirects file to the public folder of your application. Inside the _redirects file, you can add a rule that redirects all requests to the index.html file, which is the main entry point of your application. This will ensure that any request, regardless of the URL, will be directed to the index.html file.
Here's an example of the rule you can add to the _redirects file:
/* /index.html 200
By redeploying your application with this _redirects file in place, the issue of "page not found" after reloading should be resolved. The redirect rule ensures that all requests are handled by the index.html file, allowing your application to function correctly even when reloading individual pages.
Remember to check your hosting platform's documentation to ensure that it supports using a _redirects file for URL routing.
2. Module not Found Error
The error is mentioned in line 135
For module not found error on Netlify
In this case, it says miragejs is missing. Upon checking package.json we can confirm that this is correct.
We can see that the miragejs module is not there and instead another module mirage.js is present. This is causing issues in detecting at the time of build. Note that sometimes for some reason, this issue won't be seen locally as the module might be used in your local machine from some other folder, so even though your project runs locally, it does not mean that the project can run during build time, the project will run with the help of dependencies provided in package.json. If there are no dependencies needed mentioned they won't be installed and so the corresponding code won't run which needs this module for it to run.
Always look out and read the module not found error log carefully. Check the path mentioned and see if that file or folder exists in your GitHub repository.
If it mentions a package name - check the
package.jsonfile to see if the module is part of it.If a file doesn't exist, add the file in GitHub and it will resolve the error.
Sometimes you make a case change such as you change from
hometoHomeand that can also cause module not found error.
Check for the name it shows on what is not found and check your code if it exists, or if there is a name mismatch seen because of case change.
Example: Here you can see the file name mentioned. It says that in line 71: Could not load /src/frontend/components/userPosts imported by src/frontend/pages/userProfile/UserProfile.jsx further it says no such file or directory.
Let's see what our repo has,
As the error message says the import line is searching for userPosts.jsx but you can see that the file does not exist in that folder in the same casing. -- it is changed to UserPosts.jsx .
This error can be solved by their changing the casing in the import statement to what is the casing in the file, that is in import statement change it to UserPosts.jsx or create another file with userPosts.jsx and content same as UserPosts.jsx. and the build will resolve the error, as it will find the appropriate file for the same.
another example where the build failed:
In general, If perhaps you think the file folder exists, check the name casing, Cart and cart is different for deploys but GitHub may not recognize this as a change. Just make sure in that case, whatever module/file/directory it is showing as missing add folder/file/directory for that with the case sensitivity it is displaying - for eg if the build is looking for Cart and if your repo has cart, just add Cart in your GitHub repo with all the files in cart. This should direct the build to take files from the correct folder.
If you like to read more check here: https://stackoverflow.com/q/17683458/21615561
An experiment I tried to reproduce this issue was:
I change the folder name from Home to home and it did not show up in the changes to be staged for commit. You can try. Try changing name from home to Home and see if it shows up in the changes to be staged. You made the change in case, but it was not acknowledged as a change to be tracked.
Same I changed the filename from about.html to About.html and it did not show any changes to be staged!
It works on YOUR system but won't work if you commit again after making these changes and then deploy immediately. For the GitHub repository since it is merely storing your code as tracked and it doesn't track the case change, you won't figure out this issue until deployment, which is when the changes on your local system won't be present as you expect - there won't be case changes on GitHub.
So if you change name after committing and it is simply a case change that is cart to Cart, make sure to check the repo on Github.com if the changes are reflected, and if not, change it in Github.com and pull the changes to your system or, if you don't want to do it immediately, then remember to do it at time of deployment.
3. For CI errors on Netlify
- This generally happens because there are warnings shown in local deployments but still our project may seem to run perfectly well, however in
build, these warnings are looked at as errors and it will cause build to fail. By settingCItofalse, we are letting Netlify know to ignore these errors. You can read lines 93 and 94 where it specifies this.
What to do: If your local deployment shows warnings and if your code is working fine and even then, the build is failing if this is the case, then simply add a new environment variable named CI ( C and I both in the capital ) and add its value as false.
After adding the variable you should try to clear cache and deploy site again.
4. Sub directory
It may happen that when you deploy your site, your repo looks like this
Here your actual app code is in my-app directory. As such when you try to deploy using this repo you may face issues during build.
To avoid errors during build try this,
When you deploy your site for the first time, you will see this:
Here in the base directory simply specify my-app which tells Netlify that your code is in this directory.
NOTE: If you would like to add some more information/examples to this, do DM me and I will add it here. Send any feedback to improve if you find anything to improvise.
You can reach me here: twitter.com/swapnildecodes