Skip to content

Commit bfca23a

Browse files
blakeffacebook-github-bot
authored andcommitted
feat(cli) check and warn if npx react-native version is using an old cached version (#37510)
Summary: Currently npx has a variety of caching strategies to avoid having to pull a version of the package from a registry. These are often unexpected to our users, who may fall behind. After looking at a variety of fancy approaches to dealing with this (the high end of which was intelligently forking npx to run `npx react-native@latest <args>`, the best possible tradeoff for time and simplicity was to warn the user when they weren't running the latest release: {F999520817} ### Problem Details On my laptop when you run `npx <package> <arguments>` this it eventually calls [libnpmexec](https://github.com/npm/cli/tree/0783cff9653928359a6c68c8fdf30b9fd02130c9/workspaces/libnpmexec), which applies this lookup [algorithm](https://github.com/npm/cli/blob/0783cff9653928359a6c68c8fdf30b9fd02130c9/workspaces/libnpmexec/lib/index.js#L39-L41) for `package@version`: - is package available in local modules (npm root → `~/project/node_modules/<package>`)?. **Importantly it will walk all the way down to `/` looking for `node_modules/<package>`**. - is package available in global modules (npm root -g → `/Users/blakef/.nvm/versions/node/v17.9.0/lib/node_modules`)? - is package available in npx cache (`~/.npm/_npx`)? - is package available in your registry? Download to the npx cache `~/.npm/_npx/<hash>/` At this point you'll have a cached copy, which then has its bin script run with the arguments you originally provided. ### How this works against React-Native users Users can get their development environment into a **persistent** pickle with a bunch of unintended side-effects of npx / npm exec’s caching model: - **It matters where you run `npx react-native`**, since it’ll default to the version of react-native in a node package's folder. This works well for us in a React Native project, but not when initializing a project outside of a package folder. - **Global and relative node_modules really matter**. If your users runs npx react-native init and they have a version of react-native installed globally, it’ll use that version. - If the user has a `node_modules/react-native` installation anywhere in the directory hierarchy it’ll be used. For example if I run `npx react-native init Foobar` in `/home/blakef/src/example` , npx will look for versions of react-native like this before searching globals or the npx cache: - /home/blakef/src/example/node_modules - /home/blakef/src/node_modules - /home/blakef/node_modules - /home/node_modules - /node_modules **nvm just makes things harder** if your user switches between versions of node it can be hard to determine if they're affected by a globally installed version. Examples include having a `.nvmrc` file in the directory they run the command which transparently switches node version (and globals location). ## Changelog: [General][Added] - Log a warning if npx react-native uses old cached version Pull Request resolved: #37510 Test Plan: Ran this directly from the project, defining the `npm_lifecycle_event=npx` to mock directly running using `npx`. Reviewed By: Andjeliko Differential Revision: D46069419 Pulled By: blakef fbshipit-source-id: 1c1af7f639c5312760a39a0828b89b7ddf2b5fda
1 parent b6d9217 commit bfca23a

File tree

1 file changed

+60
-2
lines changed

1 file changed

+60
-2
lines changed

packages/react-native/cli.js

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,68 @@
1010

1111
'use strict';
1212

13-
var cli = require('@react-native-community/cli');
13+
const {get} = require('https');
14+
const {URL} = require('url');
15+
const chalk = require('chalk');
16+
const cli = require('@react-native-community/cli');
17+
18+
const {version: currentVersion} = require('./package.json');
19+
20+
const isNpxRuntime = process.env.npm_lifecycle_event === 'npx';
21+
const DEFAULT_REGISTRY_HOST =
22+
process.env.npm_config_registry ?? 'https://registry.npmjs.org/';
23+
const HEAD = '1000.0.0';
24+
25+
async function getLatestVersion(registryHost = DEFAULT_REGISTRY_HOST) {
26+
return new Promise((res, rej) => {
27+
const url = new URL(registryHost);
28+
url.pathname = 'react-native/latest';
29+
get(url.toString(), resp => {
30+
const buffer = [];
31+
resp.on('data', data => buffer.push(data));
32+
resp.on('end', () => {
33+
try {
34+
res(JSON.parse(Buffer.concat(buffer).toString('utf8')).version);
35+
} catch (e) {
36+
rej(e);
37+
}
38+
});
39+
}).on('error', e => rej(e));
40+
});
41+
}
42+
43+
/**
44+
* npx react-native -> @react-native-comminity/cli
45+
*
46+
* Will perform a version check and warning if you're not running the latest community cli when executed using npx. If
47+
* you know what you're doing, you can skip this check:
48+
*
49+
* SKIP=true npx react-native ...
50+
*
51+
*/
52+
async function main() {
53+
if (isNpxRuntime && !process.env.SKIP && currentVersion !== HEAD) {
54+
try {
55+
const latest = await getLatestVersion();
56+
if (latest !== currentVersion) {
57+
const msg = `
58+
${chalk.bold.yellow('WARNING:')} You should run ${chalk.white.bold(
59+
'npx react-native@latest',
60+
)} to ensure you're always using the most current version of the CLI. NPX has cached version (${chalk.bold.yellow(
61+
currentVersion,
62+
)}) != current release (${chalk.bold.green(latest)})
63+
`;
64+
console.warn(msg);
65+
}
66+
} catch (_) {
67+
// Ignore errors, since it's a nice to have warning
68+
}
69+
}
70+
return cli.run();
71+
}
1472

1573
if (require.main === module) {
16-
cli.run();
74+
main();
1775
}
1876

1977
module.exports = cli;

0 commit comments

Comments
 (0)