Skip to content

Commit

Permalink
feat(cli) check and warn if npx react-native version is using an old …
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
blakef authored and facebook-github-bot committed May 22, 2023
1 parent b6d9217 commit bfca23a
Showing 1 changed file with 60 additions and 2 deletions.
62 changes: 60 additions & 2 deletions packages/react-native/cli.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,68 @@

'use strict';

var cli = require('@react-native-community/cli');
const {get} = require('https');
const {URL} = require('url');
const chalk = require('chalk');
const cli = require('@react-native-community/cli');

const {version: currentVersion} = require('./package.json');

const isNpxRuntime = process.env.npm_lifecycle_event === 'npx';
const DEFAULT_REGISTRY_HOST =
process.env.npm_config_registry ?? 'https://registry.npmjs.org/';
const HEAD = '1000.0.0';

async function getLatestVersion(registryHost = DEFAULT_REGISTRY_HOST) {
return new Promise((res, rej) => {
const url = new URL(registryHost);
url.pathname = 'react-native/latest';
get(url.toString(), resp => {
const buffer = [];
resp.on('data', data => buffer.push(data));
resp.on('end', () => {
try {
res(JSON.parse(Buffer.concat(buffer).toString('utf8')).version);
} catch (e) {
rej(e);
}
});
}).on('error', e => rej(e));
});
}

/**
* npx react-native -> @react-native-comminity/cli
*
* Will perform a version check and warning if you're not running the latest community cli when executed using npx. If
* you know what you're doing, you can skip this check:
*
* SKIP=true npx react-native ...
*
*/
async function main() {
if (isNpxRuntime && !process.env.SKIP && currentVersion !== HEAD) {
try {
const latest = await getLatestVersion();
if (latest !== currentVersion) {
const msg = `
${chalk.bold.yellow('WARNING:')} You should run ${chalk.white.bold(
'npx react-native@latest',
)} to ensure you're always using the most current version of the CLI. NPX has cached version (${chalk.bold.yellow(
currentVersion,
)}) != current release (${chalk.bold.green(latest)})
`;
console.warn(msg);
}
} catch (_) {
// Ignore errors, since it's a nice to have warning
}
}
return cli.run();
}

if (require.main === module) {
cli.run();
main();
}

module.exports = cli;

0 comments on commit bfca23a

Please sign in to comment.