DEV Community

Cover image for Fixing the "Ghost Folder" in GitHub: Converting a Broken Submodule to a Normal Folder
Raziq Din
Raziq Din

Posted on

Fixing the "Ghost Folder" in GitHub: Converting a Broken Submodule to a Normal Folder

If you’ve ever pushed your code to GitHub and noticed a folder icon with a white arrow on it, and found that you couldn't click into that folder to see your files, you aren’t alone. This is a common headache for developers, typically caused by a "nested repository" or a broken Git submodule.

Check the example down below ( it's my repo , a pretty interesting use case from one of my projects ) :
 

Broken submodule

 

The Anatomy of the Problem

The arrow icon on the folder indicates that Git is treating that directory as a submodule. This usually happens when you initialize a project (like a React app using create-react-app) inside an existing Git repository.

Because the new folder that I initiated comes with its own hidden .git folder, your main repository gets confused. It thinks, "I shouldn't track these files, I should just point to this other repository instead." Since that "other" repository isn't linked correctly on GitHub, you end up with an empty, unclickable folder.

 

In this article , We're going to walk through how to solve this issue!

 

Step 1 : Locate to root project

Locate yourself to your root project , for example:

project-root/
├── backend_folder/     # Go backend
│   └── main.go
├── my-app/             # Expo / React Native app

Enter fullscreen mode Exit fullscreen mode

I will navigate back to project-root/ directory

 

Run this command after that:

git rm --cached my-app

Enter fullscreen mode Exit fullscreen mode

This command is used to stop your git ecosystem from tracking the my-app/ folder as a submodule (since the folder has the .git file). This command will remove the tracking version of the folder without losing your files

 

Step 2: Delete the Internal Git Data

Run this command :

Remove-Item -Recurse -Force my-app/.git

Enter fullscreen mode Exit fullscreen mode

Your backend or frontend folder might have a hidden .git file to track its own folder files changes. You have to delete the file so it will stop acting as its own independent repository. In my case , the .git file is in my react native folder called my-app/.

 

Step 3 : Re-add and Push

Once your .git file in some of your folders are deleted , you can start tracking your folders and files under one parent git repository.

Run this command :

git add your-folder-name/
git commit -m "Fixed: converted submodule to a normal directory" 
git push origin your-branch-name

Enter fullscreen mode Exit fullscreen mode

 

Now , your remote repository will store all your folders and files in the project on Github!

 

The End Results:

New repo

 

There you go, thank you very much for the read. Hopefully this tip is useful to you dear readers :). Have a good day and let me know your thoughts on this!

Top comments (0)