Module not found Error when uploading code to server (React Js, Tailwind CSS, render.com)

Question

When I run my program in local host, I get no errors, and it works perfectly. As soon as I uploaded to render.com server following adding Tailwind css to my project, It fails to build because

Module not found: Error: Can't resolve '../components/Navbar.js' in '/opt/render/project/src/src/pages'

I have checked my import statements and they all seem to be correct. I have also tried checking everything related to Tailwind that I added, and they all make sense. I have a suspicion the problem may be with the tailwind config file because maybe it is ignoring my component on the build?

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
}

Here is a page that imports Navbar (maybe the issue?)

import Navbar from "../components/Navbar.js"; 
function Home() {   
    return (     
        <div className="App">         
            <Navbar/>     
        </div>   
    ); 
} 

I have tried all the other stack overflow similar questions but none of them worked, I have tried changing my imports to .js, checking my imports for invisible spaces, upper and lower case, I have also tried changing my tailwind css file.

this is my package.json file

{
  "name": "ratemyjudge.com",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@mui/joy": "^5.0.0-alpha.63",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.2.0",
    "react-rangeslider": "^2.2.0",
    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^5.0.0",
    "tailwindcss": "^3.2.6"
  }
}

This is my entire repo: https://github.com/shreybirmiwal/ratemyjudge Thank you so much for your help

Answer 1

This is a pretty weird issue that I have encountered previously in some of my projects!

I believe you renamed your "components" folder to "Components" or vice versa. Git has trouble recognising this rename and does not track it well!

I'd suggest you manually rename the imports and try!