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

Source: Dev.to

Overview

If you’ve ever pushed your code to GitHub and seen a folder icon with a white arrow that you can’t click into, you’re not alone. This usually happens because the folder is being treated as a Git submodule (often the result of a nested repository). Below is a step‑by‑step guide to convert that broken submodule into a normal folder.

The Anatomy of the Problem

The arrow icon indicates that Git thinks the directory is a submodule. This commonly occurs when you initialize a new project (e.g., a React app created with create‑react‑app) inside an existing Git repository. The new project brings its own hidden .git folder, causing the parent repository to treat the directory as a separate repository. Since the submodule isn’t linked correctly on GitHub, the folder appears empty and unclickable.

Step 1: Locate the Root Project

Navigate to the root of your monorepo. For example:

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

Run the following command from project-root/ to stop Git from tracking my-app/ as a submodule:

git rm --cached my-app

This removes the submodule entry from the index without deleting any files.

Step 2: Delete the Internal Git Data

Remove the hidden .git directory (or file) inside the submodule so it no longer acts as an independent repository:

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

Note: Adjust the path if the internal Git data resides elsewhere.

Step 3: Re‑add and Push

Now that the internal Git data is gone, add the folder back to the parent repository, commit, and push:

git add my-app/
git commit -m "Fixed: converted submodule to a normal directory"
git push origin

Your remote repository will now store all files and folders under a single Git history.

The End Results

---

Thanks for reading! I hope this tip helps you resolve the “ghost folder” issue on GitHub. Feel free to share your thoughts.