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

Comments

Projects
None yet
@brentvatne
Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@cyprusglobe

cyprusglobe commented Jul 9, 2015

+1

@dozoisch

This comment has been minimized.

Show comment
Hide comment
@dozoisch

dozoisch Jul 9, 2015

Contributor

👍

Contributor

dozoisch commented Jul 9, 2015

👍

@shlomiatar

This comment has been minimized.

Show comment
Hide comment
@shlomiatar

shlomiatar Jul 9, 2015

Contributor

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!');
  }
});
Contributor

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 10, 2015

Collaborator

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

Collaborator

brentvatne commented Jul 10, 2015

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

@fabiomcosta

This comment has been minimized.

Show comment
Hide comment
@fabiomcosta

fabiomcosta commented Jul 13, 2015

+1

@fabiomcosta

This comment has been minimized.

Show comment
Hide comment
@fabiomcosta

fabiomcosta Jul 13, 2015

ideally the cache key would consider the current babel transforms

fabiomcosta commented Jul 13, 2015

ideally the cache key would consider the current babel transforms

@zallek

This comment has been minimized.

Show comment
Hide comment
@zallek

zallek Jul 28, 2015

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

zallek commented Jul 28, 2015

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

@amasad

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Sep 8, 2015

Contributor

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

Contributor

amasad commented Sep 8, 2015

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 17, 2015

Member
hours_spent_here += 3;
Member

gaearon commented Sep 17, 2015

hours_spent_here += 3;
@alejomendoza

This comment has been minimized.

Show comment
Hide comment
@alejomendoza

alejomendoza Sep 19, 2015

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

alejomendoza commented Sep 19, 2015

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

@shlomiatar

This comment has been minimized.

Show comment
Hide comment
@shlomiatar

shlomiatar Sep 20, 2015

Contributor

@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! :)

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 20, 2015

Collaborator

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

Collaborator

ide commented Sep 20, 2015

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

@dzannotti

This comment has been minimized.

Show comment
Hide comment
@dzannotti

dzannotti Oct 8, 2015

Contributor

hours_spent_here += 3;
rctapp clean cache saved the day

Contributor

dzannotti commented Oct 8, 2015

hours_spent_here += 3;
rctapp clean cache saved the day

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Oct 18, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Oct 30, 2015

Contributor

Nevermind, resolved.

Contributor

niftylettuce commented Oct 30, 2015

Nevermind, resolved.

@LeoFidjeland

This comment has been minimized.

Show comment
Hide comment
@LeoFidjeland

LeoFidjeland Dec 13, 2015

hours_spent_here += 2;

rm -fr $TMPDIR/react-* fixed it

LeoFidjeland commented Dec 13, 2015

hours_spent_here += 2;

rm -fr $TMPDIR/react-* fixed it

@martinbigio

This comment has been minimized.

Show comment
Hide comment
@martinbigio

martinbigio Dec 25, 2015

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jan 3, 2016

Collaborator

Ping @kittens :)

Collaborator

brentvatne commented Jan 3, 2016

Ping @kittens :)

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Jan 10, 2016

Contributor

+1

Contributor

niftylettuce commented Jan 10, 2016

+1

@nevir

This comment has been minimized.

Show comment
Hide comment
@nevir

nevir Mar 1, 2016

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@martinbigio

martinbigio Mar 1, 2016

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@wtfil

wtfil Mar 14, 2016

Contributor

watchman watch-del-all

Contributor

wtfil commented Mar 14, 2016

watchman watch-del-all

@saulshanabrook

This comment has been minimized.

Show comment
Hide comment
@saulshanabrook

saulshanabrook Jul 14, 2016

Now I think it is?

watchman . watch-del-all

saulshanabrook commented Jul 14, 2016

Now I think it is?

watchman . watch-del-all
@jdmarshall

This comment has been minimized.

Show comment
Hide comment
@jdmarshall

jdmarshall 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?

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

This comment has been minimized.

Show comment
Hide comment
@janaka

janaka Sep 3, 2016

Let's not forget Windows.

janaka commented Sep 3, 2016

Let's not forget Windows.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 4, 2016

Collaborator

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

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@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

This comment has been minimized.

Show comment
Hide comment
@arthur31416

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

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

This comment has been minimized.

Show comment
Hide comment
@lprhodes

lprhodes Sep 27, 2016

Contributor

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

Contributor

lprhodes commented Sep 27, 2016

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

@hellogerard

This comment has been minimized.

Show comment
Hide comment
@hellogerard

hellogerard 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:

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:

@liuliangsir

This comment has been minimized.

Show comment
Hide comment
@liuliangsir

liuliangsir Jan 13, 2017

thx@lprhodes

liuliangsir commented Jan 13, 2017

thx@lprhodes

@j2kun

This comment has been minimized.

Show comment
Hide comment
@j2kun

j2kun Feb 27, 2017

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@lprhodes

lprhodes Feb 27, 2017

Contributor

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

Contributor

lprhodes commented Feb 27, 2017

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

@j2kun

This comment has been minimized.

Show comment
Hide comment
@j2kun

j2kun Feb 27, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@j2kun

j2kun Feb 27, 2017

Contributor

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

Contributor

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

Fix suggestion to "npm start -- --reset-cache"
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

Fix suggestion to "npm start -- --reset-cache"
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

Fix suggestion to "npm start -- --reset-cache"
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

Fix suggestion to "npm start -- --reset-cache"
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

This comment has been minimized.

Show comment
Hide comment
@david-a

david-a 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

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

This comment has been minimized.

Show comment
Hide comment
@tarheele

tarheele 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

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

This comment has been minimized.

Show comment
Hide comment
@leoskyrocker

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

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.