Help us understand the problem. What is going on with this article?

Windowsでnpm startしたときに「内部コマンドまたは外部コマンド~」と出てくる現象と戦う

1. 問題発生

Webpackをglobalにインストールすることが非推奨であることを知り、

> npm remove -g webpack webpack-cli

としたところ、既存のプロジェクトにて

> npm run build
'webpack' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

と出てしまった。
package.json の scripts はこんな感じ

package.json
"scripts": {
    "build": "webpack --mode development",
}

ひとまずこれは再度グローバルにインストールすることで回避していたが、
ある日、Reactの勉強を始めようとしたところ、

> npx create-react-app pwa-sample
> cd pwa-sample
> yarn start
'react-scripts' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

と、こちらもNG。
どういうことなの?

2. 試したこと

  1. node_modules と packege-lock.json を削除して npm install ・・・ NG
  2. コマンドプロンプトやPowerShellを管理者で起動して ・・・ NG
  3. node_modules/.bin の中に webpack.cmd(react-scripts.cmd) が存在するか確認 ・・・ 存在する
  4. npx コマンドでstart ・・・ OK
  5. package.json 内の webpack や react-scripts コマンドのパス書き換え ・・・ OK

つまり、 node_modules/.bin のパスを理解していない ということか?
この時点での解決策は以下になるが、これではMacやLinuxと共通化ができずに面倒くさいしイマイチ美しくない。

package.json
"scripts": {
    "build": "node_modules\\.bin\\webpack.cmd --mode development"   // webpackの場合
    "start": "node_modules\\.bin\\react-scripts.cmd start"   // react-scriptの場合
}

通常、私はプロジェクト用のディレクトリは D:\projects というパスに設置しているが、
ちょっと気分を変えて C:\Users\hogehoge\Documents(マイドキュメント) にて作業してみた。

>yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!

あれ?通った?

3. 原因判明

CドライブとDドライブで何が違うんだろう・・・とパーミッションやnpmグローバルディレクトリを覗いていたがよくわからない。
C:\Users\hogehoge\AppData\Roaming\npm-cache\_logs も見るがパスは通っているように見える。
(PATHの行に プロジェクトディレクトリ/node_modules/.bin が含まれている)

後は何が問題なのだろうか、ドライブ間で何か特別な操作をしただろうか?

1つだけあった
それは以前に 大文字小文字を区別する設定をしていた ことだった。

# 管理者で実行
> fsutil.exe file SetCaseSensitiveInfo D:\projects
ディレクトリ D:\projects の大文字と小文字を区別する属性が有効になっています。

試しにこれを解除して再チャレンジ

# 管理者で実行
> fsutil.exe file SetCaseSensitiveInfo D:\project disable
ディレクトリ D:\project の大文字と小文字を区別する属性が無効になっています。

# 通常ユーザーで実行
> yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!

問題なく通りました。
もちろんwebpackもOK。

どうやら、webpack や react-scripts コマンドは webpack.cmd や react-scripts.cmd ではなく、webpack.CMD や react-scripts.CMD を探していた、ということらしい。

安易にSetCaseSensitiveInfoを有効にしないように注意しましょう。
ただ、これが有効になっていないと困るケースもあるので悩ましい・・・
状況により中段に書いた node_modules\\.bin\\webpack.cmd と併用することになりそう。

コメントをいただき解決しました!

SetCaseSensitiveInfo を有効にしたままコマンドを通す

.cmd が実行できるように環境変数に追加することで回避できました。

  1. コントロールパネルのシステムを開く
  2. システムの詳細設定
  3. 環境変数
  4. 下段のPATHEXTの編集で末尾に ;.cmd を追記
  5. 保存してコマンドプロンプトを開き直す
# 通常ユーザーで実行
> yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!
bananacoffee
千葉県在住、千駄ヶ谷あたりで働くエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away