Ever tried developing a React Native app on Windows and hit that dreaded “path too long” error? You’re not alone. What’s worse, it often happens right when you’re in the flow of coding, bringing your productivity to a screeching halt.

I recently faced this exact issue while working on a monorepo project. After some trial and error, I found a reliable solution using symbolic links (symlinks). Let me share how you can set this up and get back to what matters – actually building your app.

Why Does This Even Happen?

Windows has this quirky limitation where file paths can’t exceed 260 characters. Sounds like plenty, right? Well, not when you’re working with modern JavaScript projects. Between your monorepo structure, node_modules, and nested dependencies, those characters add up fast.

The Solution: Symlinks to the Rescue

Think of symlinks as shortcuts on steroids. They create a virtual “short path” that points to your actual project folder. The best part? They’re built right into Windows – we just need to set things up correctly.

Getting Started

First things first, we need to tell Windows to play nice with longer paths. Open PowerShell as Administrator and run this command:

Set-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1

Remember to restart your computer after this – yes, really. Windows needs it to apply these changes.

Setting Up Your Development Environment

Here’s where the magic happens. We’ll create a dedicated space for our symlinks and set them up to point to our actual project folders.

1. First, create a new directory to keep things organized:

New-Item -ItemType Directory -Path "C:\dev-links" -Force

2. Now, create your symlink:

New-Item -ItemType Junction -Path "C:\dev-links\my-app" -Target "C:\really\long\path\to\your\react-native\project"

Making Metro Play Nice

Metro (React Native’s bundler) needs to know about our symlink setup. Create or update your metro.config.js:

const path = require('path');
const { getDefaultConfig } = require('@expo/metro-config');

const projectRoot = __dirname;
const workspaceRoot = path.resolve(__dirname);

const config = getDefaultConfig(projectRoot);

config.watchFolders = [
  projectRoot,
  workspaceRoot,
  'C:/dev-links/my-app', // Your symlink path
];

config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
];

// Handle symlinks properly
config.resolver.disableHierarchicalLookup = true;
config.resolver.resolveRequest = (context, moduleName, platform) => {
  // Handle virtual entry points for Expo
  if (moduleName.includes('.expo/.virtual-metro-entry')) {
    return {
      filePath: path.resolve(projectRoot, '.expo/virtual-metro-entry.js'),
      type: 'sourceFile',
    };
  }
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

Working With Your New Setup

From now on, instead of navigating to that long project path, just:

cd C:\dev-links\my-app
npx expo start

Managing Multiple Projects

# Create symlinks for different projects
New-Item -ItemType Junction -Path "C:\dev-links\main-app" -Target "C:\workspace\monorepo\packages\main-app"
New-Item -ItemType Junction -Path "C:\dev-links\feature-x" -Target "C:\workspace\monorepo\packages\feature-x"

Troubleshooting

If you run into issues, here’s a quick checklist:

1. Verify your symlinks are working:

Get-Item C:\dev-links\* | Where-Object {$_.LinkType -eq "Junction"} | Select-Object FullName,Target

2. If a symlink seems broken, remove and recreate it:

Remove-Item "C:\dev-links\my-app" -Force
New-Item -ItemType Junction -Path "C:\dev-links\my-app" -Target "[YOUR_PROJECT_PATH]"

Wrapping Up

This solution might seem like a bit of setup upfront, but it’s saved me countless hours of frustration. Plus, once it’s set up, it just works. No more path length errors, no more disrupted coding sessions.