ReactJS、npm、create-react-app で発生する警告メッセージ「npm WARN config global --global, --local are deprecated. Use --location=global instead」の解説

2024-04-02

ReactJS、npm、create-react-app で発生する警告メッセージ「npm WARN config global --global, --local are deprecated. Use --location=global instead」の解説

この警告メッセージは、npm コマンドの --global と --local オプションが非推奨になったことを示しています。これらのオプションは、パッケージのインストール場所を指定するために使用されていましたが、新しいオプション --location に置き換えられました。

原因

この警告メッセージが表示される理由は、npm のバージョン 8.11 以降を使用しているためです。バージョン 8.11 で、--global と --local オプションは非推奨となり、代わりに --location オプションを使用する必要があります。

解決方法

この警告メッセージを解決するには、--global と --local オプションを --location オプションに置き換える必要があります。

例

従来の書き方:

npm install -g react-router-dom

新しい書き方:

npm install --location=global react-router-dom

補足

この警告メッセージは、create-react-app を使用して作成したプロジェクトでも発生する可能性があります。
この警告メッセージは無視しても問題ありませんが、将来的には削除される可能性がありますので、早めに修正することを推奨します。

// package.json

{
  "dependencies": {
    "react": "^18.0.0",
    "react-router-dom": "^6.3.0"
  }
}

// App.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// package.json

{
  "dependencies": {
    "react": "^18.0.0",
    "react-router-dom": "^6.3.0"
  }
}

// App.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// 解決策

npm install --location=global react-router-dom

上記のように、npm install コマンドの --global オプションを --location=global オプションに置き換えることで、警告メッセージを解決することができます。

警告メッセージ「npm WARN config global --global, --local are deprecated. Use --location=global instead」を解決する他の方法

npmrc ファイルは、npm コマンドの動作をグローバルに設定するために使用できます。このファイルに location プロパティを設定することで、--location=global オプションを指定する必要なく、すべてのグローバルパッケージを特定の場所にインストールすることができます。

手順

プロジェクトのルートディレクトリに .npmrc ファイルを作成します。
以下の内容を .npmrc ファイルに書き込みます。

location=C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules

npm install コマンドを実行します。

npx を使用する

npx コマンドは、npm パッケージを一時的にインストールして実行するために使用できます。このコマンドを使用することで、--location=global オプションを指定せずに、グローバルパッケージを実行することができます。

以下のコマンドを実行して、react-router-dom パッケージを一時的にインストールします。

npx react-router-dom

以下のコマンドを実行して、App.js ファイルを実行します。

npx node App.js

Yarn を使用する

Yarn は、npm に代わるパッケージマネージャーです。Yarn は、--location オプションと同様の機能を持つ --global オプションを提供しています。

Yarn をインストールします。

npm install --global yarn

yarn global add react-router-dom

yarn start

上記の方法のいずれかを使用して、警告メッセージ「npm WARN config global --global, --local are deprecated. Use --location=global instead」を解決することができます。どの方法を使用するかは、開発環境やプロジェクトの要件によって異なります。

reactjs npm create-react-app