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

【初心者】npm ERR! の対処法

未来電子テクノロジー株式会社でインターンをしている文系大学一回生です。

npm ERR! と格闘しました。

ケース1

Jest + enzymeで行うReactのユニットテスト(単体テスト)についてという記事を参考にしていたところ、$ npm testコマンドを打つと、npm ERR!が複数出てしまったのでその解消法をメモします。

ステップ1

$ npm install -g npm

npm自体のアップデートをする。
npmでnpm自信をアップデートするイメージ。

ステップ2

$ rm -rf node_modules

既存のモジュールを削除する。

ステップ3

$ npm install

プロジェクトの依存関係を再インストールする。

ケース2

react-router@v4を使ってみよう:シンプルなtutorialという記事を参考にしていたところ、$ npm startコマンドを打つと、npm ERR!が出てしまった。

エラーの内容
To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/tagawahirotaka/node_modules/babel-loader is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

1~4を試しても、エラーは解消されない。

5,6に書かれている通り、webpackがプロジェクトフォルダーではないところにインストールされてしまっている。

そこで、ホームディレクトリにあるnode_modulesをすべて削除した。

すると、エラーが解消された。

ケース3

$ npm run webpackを実行した際、以下のエラー。

> @ webpack /Users/tagawahirotaka/Desktop/webpack
> webpack src/index.js public/bundle.js

Hash: 180ac7bf541799553075
Version: webpack 4.35.3
Time: 233ms
Built at: 2019-07-09 10:10:51
 1 asset
Entrypoint main = main.js
[0] multi ./src/index.js public/bundle.js 40 bytes {0} [built]
[1] ./src/index.js + 1 modules 161 bytes {0} [built]
    | ./src/index.js 104 bytes [built]
    | ./src/module.js 57 bytes [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in multi ./src/index.js public/bundle.js
Module not found: Error: Can't resolve 'public/bundle.js' in '/Users/tagawahirotaka/Desktop/webpack'
 @ multi ./src/index.js public/bundle.js main[1]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ webpack: `webpack src/index.js public/bundle.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tagawahirotaka/.npm/_logs/2019

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

らしいので、webpack 4 入門を参考に、webpack.config.jsを書き換えた。

ケース4

npm startをすると、

npm ERR! code ELIFECYCLE
npm ERR! errno 1

から始まるエラーが出た。

ステップ1

rm -rf node_modules
インストールされたjsモジュールを全部消す

ステップ2

rm package-lock.json yarn.lock
インストールされたjsモジュールのバージョン情報を消す

ステップ3

npm cache clear --force
npmのキャッシュをクリアする

ステップ4

npm install
npm start
再度jsモジュールを全部入れ直して、実行する

ケース5

npm install --save-dev backstopjs
を実行すると、

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "backstopjs" under a package
npm ERR! also called "backstopjs". Did you name your project the same
npm ERR! as the dependency you're installing?

から始まるエラーが出た。

Refusing to install package with name "backstopjs" under a package
らしいので、package.json"name""backstopjs"以外にした。

まとめ

私の場合はこれでエラーが解消しました。
何か誤りがあればご指摘お願いします。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした