[Packager] Command or flag to clean cache

[brentvatne]

When introducing a custom .babelrc, it's necessary to add the resetCache flag to the packager. This requires digging into node_modules and isn't the most developer friendly (DX anybody? :P)

So we should either allow users to do:

./node_modules/react-native/packager/packager.sh clean

or

./node_modules/react-native/packager/packager.sh -root . -clean

Also open to other solutions! cc @amasad

[cyprusglobe]

+1

[dozoisch]

👍

[shlomiatar]

We use this quick and dirty gulp task:

gulp.task('clear-cache', function () {
  // Clear react-packager cache
  var tempDir = os.tmpdir();

  var cacheFiles = fs.readdirSync(tempDir).filter(function (fileName) {
    return fileName.indexOf('react-packager-cache') === 0;
  });

  cacheFiles.forEach(function (cacheFile) {
    var cacheFilePath = path.join(tempDir, cacheFile);
    fs.unlinkSync(cacheFilePath);
    console.log('Deleted cache: ', cacheFilePath);
  });

  if (!cacheFiles.length) {
    console.log('No cache files found!');
  }
});

[brentvatne]

Nice one @shlomiatar! Could you submit a pull request to add that command to the packager?

[fabiomcosta]

+1

[fabiomcosta]

ideally the cache key would consider the current babel transforms

[zallek]

+1 thanks for the tip, and yeh a clean command would be appreciated :)

[amasad]

@martinbigio just shipped a diff that adds support for this. Should land soon.

[gaearon]

hours_spent_here += 3;

[alejomendoza]

👍 this is such an annoying bug 🪲 where do we add the gulp task?

[shlomiatar]

@alejomendoza,
You can install gulp by running npm install -g gulp.
then, you add gulpfile.js and add the task in it (and require the dependencies, os and fs)

you can run the task by typing gulp clear-cache on the same folder as the gulpfile.
good luck! :)

[ide]

For the time being you also can run rm -fr $TMPDIR/react-*.

[dzannotti]

hours_spent_here += 3;
rctapp clean cache saved the day

[niftylettuce]

I tried both, but stage: 0 flag is still not working, I can't use things like ... spread operator or => arrow functions.

[niftylettuce]

Nevermind, resolved.

[LeoFidjeland]

hours_spent_here += 2;

rm -fr $TMPDIR/react-* fixed it

[martinbigio]

Would it be possible not to rely on .babelrc and have the entire configuration on the transformer? cc @sebmck

[brentvatne]

Ping @kittens :)

[niftylettuce]

+1

[nevir]

hours_spent_here += 3;

rm -fr $TMPDIR/react-* wasn't enough to fix my particular issue (module still being emitted in the bundle after removing it from node_modules and all imports of it), still digging in

[martinbigio]

We recently added support to allow the transformer to specify a cache key (b5f8006). You should be able to make the key dependent on the plugins you're using (the preset + the specifics to your build if any).

[wtfil]

watchman watch-del-all

[saulshanabrook]

Now I think it is?

watchman . watch-del-all

[jdmarshall]

It seems this problem still exists, but react no longer writes its cache to the tmp directory. Where is it hiding now?

[janaka]

Let's not forget Windows.

[ide]

The command to clear the cache is npm start --reset-cache (specifically, however you invoke the RN server, pass the --reset-cache option to it).

[hybrisCole]

The config this guy proposes is really good to handle this https://medium.com/komenco/useful-react-native-npm-scripts-6c07b04c3ac3#.63boty1oh

[arthur31416]

These commands from Ignite are great too:

"clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean"
"newclear": "rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && npm cache clean && npm i"

[lprhodes]

npm start -- --reset-cache works much better than npm start --reset-cache

[hellogerard]

@lprhodes I see that -- here and there, but I don't really know what it does. What's the difference between npm start -- --reset-cache and npm start --reset-cache?

EDIT: N/m, I RTFM :-)

As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:

[ghost]

thx@lprhodes

[j2kun]

Is there any way to clear the cache while the packager is still running? Or more to my ultimate goal, just tell the react-native packager to re-transpile a specific javascript file on some filesystem event?

[lprhodes]

@j2kun Enabling live reload should work for everything except after changes to node_modules.

[j2kun]

@lprhodes This doesn't work for non-javascript file changes. What I have been doing (a really crappy workaround) is creating a watchman trigger for my specific file to run

find $TMPDIR/react-native-packager-cache-* -name "mypattern" | xargs rm

But this doesn't even work because I have to restart the packager for it to pick up that these cache files got deleted. I would really love a way to say "Hey packager, when this file changes, please re-transpile this other JS file!" But I've been searching and experimenting for a week and can't figure out how to do this.

[j2kun]

This was the solution I was able to come up with. Would appreciate any suggestions for improvements, or better yet a principled way to do it

http://stackoverflow.com/questions/42212314/tell-react-native-packager-to-watch-a-non-javascript-file/42497592#42497592

[david-a]

I had to remove both react-native-packager-cache-* (directory) AND haste-map-react-native-packager-* (file) from $TMPDIR
thank you all

[tarheele]

On windows, I made the mistake of renaming node_modules to node_modules.todelete in an effort to debug an issue. Something cached this and gave me an error

P: error: bundling failed: ambiguous resolution: module [mymodule] tries to require 'react-native', but there are several files providing this module. You can delete or fix them:

• ...\node_modules.todelete\react-native\package.json
• ...\node_modules\react-native\package.json

The key for me was the haste removal tip by @david-a

I am sharing this mainly so folks can find the error text I encountered

[leoskyrocker]

https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d#gistcomment-2277722

for RN50 the tmp cache files seems to have a different name
"clear": "rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*"