Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Packager] Command or flag to clean cache #1924

Closed
brentvatne opened this issue Jul 9, 2015 · 38 comments
Closed

[Packager] Command or flag to clean cache #1924

brentvatne opened this issue Jul 9, 2015 · 38 comments

Comments

@brentvatne
Copy link
Collaborator

@brentvatne brentvatne commented Jul 9, 2015

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
Copy link

@cyprusglobe cyprusglobe commented Jul 9, 2015

+1

1 similar comment
@dozoisch
Copy link
Contributor

@dozoisch dozoisch commented Jul 9, 2015

👍

@shlomiatar
Copy link
Contributor

@shlomiatar shlomiatar commented Jul 9, 2015

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
Copy link
Collaborator Author

@brentvatne brentvatne commented Jul 10, 2015

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

@fabiomcosta
Copy link

@fabiomcosta fabiomcosta commented Jul 13, 2015

+1

@fabiomcosta
Copy link

@fabiomcosta fabiomcosta commented Jul 13, 2015

ideally the cache key would consider the current babel transforms

@zallek
Copy link

@zallek zallek commented Jul 28, 2015

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

@amasad
Copy link
Contributor

@amasad amasad commented Sep 8, 2015

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

@gaearon
Copy link
Member

@gaearon gaearon commented Sep 17, 2015

hours_spent_here += 3;
@alejomendoza
Copy link

@alejomendoza alejomendoza commented Sep 19, 2015

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

@shlomiatar
Copy link
Contributor

@shlomiatar shlomiatar commented Sep 20, 2015

@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
Copy link
Contributor

@ide ide commented Sep 20, 2015

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

@dzannotti
Copy link
Contributor

@dzannotti dzannotti commented Oct 8, 2015

hours_spent_here += 3;
rctapp clean cache saved the day

@niftylettuce
Copy link
Contributor

@niftylettuce niftylettuce commented Oct 18, 2015

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

@niftylettuce
Copy link
Contributor

@niftylettuce niftylettuce commented Oct 30, 2015

Nevermind, resolved.

@LeoFidjeland
Copy link

@LeoFidjeland LeoFidjeland commented Dec 13, 2015

hours_spent_here += 2;

rm -fr $TMPDIR/react-* fixed it

@martinbigio
Copy link
Contributor

@martinbigio martinbigio commented Dec 25, 2015

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

@brentvatne
Copy link
Collaborator Author

@brentvatne brentvatne commented Jan 3, 2016

Ping @kittens :)

@niftylettuce
Copy link
Contributor

@niftylettuce niftylettuce commented Jan 10, 2016

+1

@nevir
Copy link
Contributor

@nevir nevir commented Mar 1, 2016

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
Copy link
Contributor

@martinbigio martinbigio commented Mar 1, 2016

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).

@martinbigio martinbigio closed this Mar 1, 2016
@wtfil
Copy link
Contributor

@wtfil wtfil commented Mar 14, 2016

watchman watch-del-all

@saulshanabrook
Copy link

@saulshanabrook saulshanabrook commented Jul 14, 2016

Now I think it is?

watchman . watch-del-all
@jdmarshall
Copy link

@jdmarshall jdmarshall commented Aug 2, 2016

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

@janaka
Copy link

@janaka janaka commented Sep 3, 2016

Let's not forget Windows.

@ide
Copy link
Contributor

@ide ide commented Sep 4, 2016

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
Copy link

@hybrisCole hybrisCole commented Sep 4, 2016

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

@arthur31416
Copy link

@arthur31416 arthur31416 commented Sep 12, 2016

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
Copy link
Contributor

@lprhodes lprhodes commented Sep 27, 2016

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

@hellogerard
Copy link

@hellogerard hellogerard commented Oct 3, 2016

@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 npm@2.0.0, 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
Copy link

@ghost ghost commented Jan 13, 2017

thx@lprhodes

@j2kun
Copy link
Contributor

@j2kun j2kun commented Feb 27, 2017

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
Copy link
Contributor

@lprhodes lprhodes commented Feb 27, 2017

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

@j2kun
Copy link
Contributor

@j2kun j2kun commented Feb 27, 2017

@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
Copy link
Contributor

@j2kun j2kun commented Feb 27, 2017

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

cooperka added a commit to cooperka/react-native that referenced this issue Mar 17, 2017
As discussed in facebook#11983. The double dash is necessary to pass through the argument to node. Based on the comments [here](facebook#1924 (comment)), it looks like most people use the double dash; it's unclear whether it would do anything at all if the dashes were omitted. If anyone else has better insight, let me know!

@hramos please review, thank you.

This reverts commit f521e99.
cooperka added a commit to cooperka/react-native that referenced this issue Mar 18, 2017
As discussed in facebook#11983. The double dash is necessary to pass through the argument to node. Based on the comments [here](facebook#1924 (comment)), it looks like most people use the double dash; it's unclear whether it would do anything at all if the dashes were omitted. If anyone else has better insight, let me know!

@hramos please review, thank you.

This reverts commit f521e99.
facebook-github-bot added a commit to facebook/metro that referenced this issue Mar 18, 2017
Summary:
As discussed in facebook/react-native#11983. The double dash is necessary to pass through the argument to node. Based on the comments [here](facebook/react-native#1924 (comment)), it looks like most people use the double dash; it's unclear whether it would do anything at all if the dashes were omitted. If anyone else has better insight, let me know!
Closes facebook/react-native#13003

Differential Revision: D4731566

Pulled By: hramos

fbshipit-source-id: 62562536db7589a03a511762117cbf0e36d3aafb
facebook-github-bot added a commit that referenced this issue Mar 18, 2017
Summary:
As discussed in #11983. The double dash is necessary to pass through the argument to node. Based on the comments [here](#1924 (comment)), it looks like most people use the double dash; it's unclear whether it would do anything at all if the dashes were omitted. If anyone else has better insight, let me know!
Closes #13003

Differential Revision: D4731566

Pulled By: hramos

fbshipit-source-id: 62562536db7589a03a511762117cbf0e36d3aafb
@david-a
Copy link

@david-a david-a commented Oct 9, 2017

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

@tarheele
Copy link

@tarheele tarheele commented Nov 18, 2017

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
Copy link

@leoskyrocker leoskyrocker commented Dec 27, 2017

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-*"

@facebook facebook locked as resolved and limited conversation to collaborators Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.