質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

npm install では上手くいくのにyarn installだとwebpackコンパイルに失敗する。

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,266

coppepan

score 14

こんにちは。 javascriptパッケージマネージャーのyarnとnpmについて質問させていただきます。 もし何かご存知でしたら、ご回答いただけると幸いです。m(__)m

 
yarnを使ってパッケージ管理をしているのですが、

yarn install
yarn start

とした場合、以下のようにいくつかのパッケージでエラーが発生します。

ERROR in ./index.js
Module not found: Error: Can't resolve 'actioncable' in 'path-to-app/web/frontend/src'
 @ ./index.js 29:0-38 79:20-31

ERROR in ./components/landing/LandingGridSlider/index.js
Module not found: Error: Can't resolve 'owl.carousel/dist/assets/owl.carousel.css' in 'path-to-app/web/frontend/src/components/landing/LandingGridSlider'
 @ ./components/landing/LandingGridSlider/index.js 12:0-51
 @ ./components/landing/LandingBody/index.js
 @ ./containers/landing/Landing.js
 @ ./containers/Home.js
 @ ./containers/App.js
 @ ./index.js

しかし、 

npm install
npm start または yarn start

とした場合、問題なくコンパイルされます。 yarn installでのみ失敗してしまうのはなぜでしょうか?

package.json

{
  "private": true,
  "name": "app",
  "version": "v11.6.0",
  "description": "app",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "http://example.com"
  },
  "scripts": {
    "test": "jest",
    "start": "webpack-dev-server",
    "prod-build": "NODE_ENV=production webpack",
    "stg-build": "NODE_ENV=staging webpack",
    "test-build": "NODE_ENV=test webpack",
    "flow": "flow",
    "storybook": "start-storybook -p 6006 -c .storybook -s ./public",
    "build-storybook": "build-storybook"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "@types/react": "^16.8.19",
    "@types/react-dom": "^16.8.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.6",
    "compression-webpack-plugin": "^2.0.0",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-flowtype": "^3.9.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "fetch-mock": "^7.3.3",
    "flow-bin": "^0.98.1",
    "flow-typed": "^2.5.2",
    "jest": "^24.8.0",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^7.1.0",
    "selenium-webdriver": "^4.0.0-alpha.1",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.0.2",
    "typescript": "^3.5.1",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.5",
    "@material-ui/core": "^4.3.1",
    "actioncable": "^5.2.3",
    "apollo-cache-inmemory": "^1.6.2",
    "apollo-client": "^2.6.2",
    "apollo-link-context": "^1.0.18",
    "apollo-link-http": "^1.5.14",
    "connected-react-router": "^6.4.0",
    "crypto-js": "^3.1.9-1",
    "dotenv": "^8.0.0",
    "enzyme": "^3.9.0",
    "file-loader": "^3.0.1",
    "firebase": "^6.0.2",
    "google-maps": "^3.3.0",
    "graphql": "^14.3.1",
    "graphql-ruby-client": "^1.6.4",
    "graphql-tag": "^2.10.1",
    "http-status": "^1.3.2",
    "http-status-codes": "^1.3.2",
    "intersection-observer": "^0.7.0",
    "jquery": "^3.4.1",
    "jquery-mockjax": "^2.5.0",
    "lodash.iserror": "^3.1.1",
    "material-ui": "^0.20.1",
    "nock": "^10.0.6",
    "node-sass": "^4.12.0",
    "piexifjs": "^1.0.5",
    "prettier": "^1.17.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-apollo": "^2.5.6",
    "react-dom": "^16.8.6",
    "react-easy-crop": "^1.14.0",
    "react-ga": "^2.5.7",
    "react-modal": "^3.8.1",
    "react-owl-carousel": "^2.3.1",
    "react-redux": "^7.0.3",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "redux-devtools": "^3.5.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "sprintf-js": "^1.1.2",
    "urijs": "^1.19.1",
    "url-loader": "^1.1.2",
    "yarn": "^1.16.0"
  }
}

webpack.config.json

const isProd = process.env.NODE_ENV === 'production'
const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const srcPath = './src'

module.exports = {
  mode: 'development',
  devServer: {
    //host: '0.0.0.0',
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    inline: true,
    hot: true,
    historyApiFallback: true,
    disableHostCheck: true
  },
  context: path.join(__dirname, 'src'),
  entry: {
    main: './index.js',
    style: './css/style.js'
  },
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.ts?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /.html$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(jpg|jpeg|png)$/,
        use: [
          {
            loader: 'url-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new CompressionPlugin(),
    ...(isProd
      ? [] // todo uglify JS
      : []),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  resolve: {
    extensions: ['.js', '.ts'],
    alias: {
      '@actions': path.resolve(__dirname, `${srcPath}/actions`),
      '@api_callers': path.resolve(__dirname, `${srcPath}/api_callers`),
      '@components': path.resolve(__dirname, `${srcPath}/components`),
      '@constants': path.resolve(__dirname, `${srcPath}/constants`),
      '@containers': path.resolve(__dirname, `${srcPath}/containers`),
      '@css': path.resolve(__dirname, `${srcPath}/css`),
      '@etoe_test': path.resolve(__dirname, `${srcPath}/etoe_test`),
      '@helpers': path.resolve(__dirname, `${srcPath}/helpers`),
      '@masters': path.resolve(__dirname, `${srcPath}/masters`),
      '@proptypes': path.resolve(__dirname, `${srcPath}/proptypes`),
      '@reducers': path.resolve(__dirname, `${srcPath}/reducers`),
      '@services': path.resolve(__dirname, `${srcPath}/services`),
      '@images': path.resolve(__dirname, `${srcPath}/../public/images`),
    }
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

おそらくlockファイルの違いでしょう。
lockファイルとは依存関係のバージョンを固定するものです。
npmはpackage-lock.json、yarnはyarn.lockというファイルになっています。
元からpackage-lock.jsonはあるがyarn.lockはなかったのではないでしょうか。
そのためyarnでインストールした場合は違うバージョンでインストールされ、エラーの原因になっていると考えられます。

私は経験がないですが、

npm install
yarn import

でpackage-lock.jsonの内容を元にyarn.lockを生成できるようです。

https://codeday.me/jp/qa/20190620/1054868.html

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る