Clearing React Native Caches

Unable to resolve module `@blah/whatever` from `whatever.js`: Module `@blah/whatever` does not exist in the Haste module map

What?

ReactNative development is an endless stream of inscrutable, never-before-seen errors. The promise of RN is that a developer can stay in the TypeScript or JavaScript zone and ignore the ugly details of mobile development, but that rarely lasts for long. Those brief, lovely stretches of productive coding are frequently interrupted by long stretches of dealing with compilation errors, gradle configuration and Java or Swift dependency conflicts. And it’s worse if you’re a JS developer thrown into the world of Java or Swift.

 
 

The ReactNative equivalent to Turning it Off and On Again is Clearing the Caches. But Haste Module Map? What’s that? And just how many caches are there?

Here’s the suggestion the error message gives you:

# To resolve try the following:
#  1. Clear watchman watches: `watchman watch-del-all`.
#  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
#  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
#  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

Here’s a way of clearing these out on Windows in PowerShell. I put this in a file called clearCaches.ps1 in a directory beside build:

Write-Output "Clearing the Haste Module Map..."
Remove-Item $env:TEMP\haste-map*
Write-Output "Clearing the Metro Cache..."
Remove-Item -Recurse -Force  -ErrorAction Ignore $env:TEMP\metro-cache
Write-Output "Removing /build/dist..."
Remove-Item -Recurse -Force  -ErrorAction Ignore "$PSScriptRoot\..\build\dist"
Write-Output "Removing node_modules..."
Remove-Item -Recurse -Force  -ErrorAction Ignore "$PSScriptRoot\..\node_modules"

Here are some other miscellaneous incantations to clear out stuff:

yarn cache clean
yarn start --reset-cache
watchman watch-del-all

Anything else I’m missing?