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

こんにちは。　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

json
1{
2  "private": true,
3  "name": "app",
4  "version": "v11.6.0",
5  "description": "app",
6  "main": "index.js",
7  "repository": {
8    "type": "git",
9    "url": "http://example.com"
10  },
11  "scripts": {
12    "test": "jest",
13    "start": "webpack-dev-server",
14    "prod-build": "NODE_ENV=production webpack",
15    "stg-build": "NODE_ENV=staging webpack",
16    "test-build": "NODE_ENV=test webpack",
17    "flow": "flow",
18    "storybook": "start-storybook -p 6006 -c .storybook -s ./public",
19    "build-storybook": "build-storybook"
20  },
21  "author": "",
22  "license": "ISC",
23  "devDependencies": {
24    "@babel/cli": "^7.4.4",
25    "@babel/core": "^7.4.5",
26    "@babel/plugin-proposal-class-properties": "^7.0.0",
27    "@babel/plugin-proposal-decorators": "^7.0.0",
28    "@babel/plugin-proposal-do-expressions": "^7.0.0",
29    "@babel/plugin-proposal-export-default-from": "^7.0.0",
30    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
31    "@babel/plugin-proposal-function-bind": "^7.0.0",
32    "@babel/plugin-proposal-function-sent": "^7.0.0",
33    "@babel/plugin-proposal-json-strings": "^7.0.0",
34    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
35    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
36    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
37    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
38    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
39    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
40    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
41    "@babel/plugin-syntax-import-meta": "^7.0.0",
42    "@babel/plugin-transform-runtime": "^7.4.4",
43    "@babel/preset-env": "^7.4.5",
44    "@babel/preset-es2015": "^7.0.0-beta.53",
45    "@babel/preset-flow": "^7.0.0",
46    "@babel/preset-react": "^7.0.0",
47    "@storybook/addon-actions": "^5.0.11",
48    "@storybook/addon-links": "^5.0.11",
49    "@storybook/addons": "^5.0.11",
50    "@storybook/react": "^5.0.11",
51    "@types/react": "^16.8.19",
52    "@types/react-dom": "^16.8.4",
53    "babel-core": "^7.0.0-bridge.0",
54    "babel-eslint": "^10.0.1",
55    "babel-jest": "^23.4.2",
56    "babel-loader": "^8.0.6",
57    "compression-webpack-plugin": "^2.0.0",
58    "css-loader": "^2.1.1",
59    "eslint": "^5.16.0",
60    "eslint-config-prettier": "^4.3.0",
61    "eslint-plugin-flowtype": "^3.9.0",
62    "eslint-plugin-import": "^2.17.2",
63    "eslint-plugin-prettier": "^3.1.0",
64    "eslint-plugin-react": "^7.13.0",
65    "fetch-mock": "^7.3.3",
66    "flow-bin": "^0.98.1",
67    "flow-typed": "^2.5.2",
68    "jest": "^24.8.0",
69    "redux-mock-store": "^1.5.3",
70    "sass-loader": "^7.1.0",
71    "selenium-webdriver": "^4.0.0-alpha.1",
72    "style-loader": "^0.23.1",
73    "ts-loader": "^6.0.2",
74    "typescript": "^3.5.1",
75    "uglifyjs-webpack-plugin": "^2.1.3",
76    "webpack": "^4.32.2",
77    "webpack-cli": "^3.3.2",
78    "webpack-dev-server": "^3.4.1"
79  },
80  "dependencies": {
81    "@babel/runtime": "^7.4.5",
82    "@material-ui/core": "^4.3.1",
83    "actioncable": "^5.2.3",
84    "apollo-cache-inmemory": "^1.6.2",
85    "apollo-client": "^2.6.2",
86    "apollo-link-context": "^1.0.18",
87    "apollo-link-http": "^1.5.14",
88    "connected-react-router": "^6.4.0",
89    "crypto-js": "^3.1.9-1",
90    "dotenv": "^8.0.0",
91    "enzyme": "^3.9.0",
92    "file-loader": "^3.0.1",
93    "firebase": "^6.0.2",
94    "google-maps": "^3.3.0",
95    "graphql": "^14.3.1",
96    "graphql-ruby-client": "^1.6.4",
97    "graphql-tag": "^2.10.1",
98    "http-status": "^1.3.2",
99    "http-status-codes": "^1.3.2",
100    "intersection-observer": "^0.7.0",
101    "jquery": "^3.4.1",
102    "jquery-mockjax": "^2.5.0",
103    "lodash.iserror": "^3.1.1",
104    "material-ui": "^0.20.1",
105    "nock": "^10.0.6",
106    "node-sass": "^4.12.0",
107    "piexifjs": "^1.0.5",
108    "prettier": "^1.17.1",
109    "prop-types": "^15.7.2",
110    "react": "^16.8.6",
111    "react-apollo": "^2.5.6",
112    "react-dom": "^16.8.6",
113    "react-easy-crop": "^1.14.0",
114    "react-ga": "^2.5.7",
115    "react-modal": "^3.8.1",
116    "react-owl-carousel": "^2.3.1",
117    "react-redux": "^7.0.3",
118    "react-router": "^5.0.0",
119    "react-router-dom": "^5.0.0",
120    "redux": "^4.0.1",
121    "redux-devtools": "^3.5.0",
122    "redux-logger": "^3.0.6",
123    "redux-thunk": "^2.3.0",
124    "sprintf-js": "^1.1.2",
125    "urijs": "^1.19.1",
126    "url-loader": "^1.1.2",
127    "yarn": "^1.16.0"
128  }
129}
130

webpack.config.json

json
1const isProd = process.env.NODE_ENV === 'production'
2const path = require('path')
3const webpack = require('webpack')
4const CompressionPlugin = require('compression-webpack-plugin')
5const srcPath = './src'
6
7module.exports = {
8  mode: 'development',
9  devServer: {
10    //host: '0.0.0.0',
11    contentBase: path.join(__dirname, 'public'),
12    compress: true,
13    inline: true,
14    hot: true,
15    historyApiFallback: true,
16    disableHostCheck: true
17  },
18  context: path.join(__dirname, 'src'),
19  entry: {
20    main: './index.js',
21    style: './css/style.js'
22  },
23  output: {
24    path: path.join(__dirname, 'public'),
25    filename: '[name].js',
26    publicPath: '/'
27  },
28  devtool: 'source-map',
29  module: {
30    rules: [
31      {
32        test: /.js$/,
33        exclude: /node_modules/,
34        use: {
35          loader: 'babel-loader'
36        }
37      },
38      {
39        test: /.ts?$/,
40        exclude: /node_modules/,
41        use: [
42          {
43            loader: 'babel-loader'
44          },
45          {
46            loader: 'ts-loader'
47          }
48        ]
49      },
50      {
51        test: /.css$/,
52        use: [
53          {
54            loader: 'style-loader'
55          },
56          {
57            loader: 'css-loader'
58          }
59        ]
60      },
61      {
62        test: /.scss$/,
63        use: [
64          {
65            loader: 'style-loader'
66          },
67          {
68            loader: 'css-loader'
69          },
70          {
71            loader: 'sass-loader'
72          }
73        ]
74      },
75      {
76        test: /.html$/,
77        use: [
78          {
79            loader: 'file-loader',
80            options: {
81              name: '[name].[ext]'
82            }
83          }
84        ]
85      },
86      {
87        test: /.(jpg|jpeg|png)$/,
88        use: [
89          {
90            loader: 'url-loader'
91          }
92        ]
93      }
94    ]
95  },
96  plugins: [
97    new webpack.DefinePlugin({
98      'process.env': {
99        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
100      }
101    }),
102    new webpack.NoEmitOnErrorsPlugin(),
103    new webpack.HotModuleReplacementPlugin(),
104    new CompressionPlugin(),
105    ...(isProd
106      ? [] // todo uglify JS
107      : []),
108    new webpack.ProvidePlugin({
109      $: 'jquery',
110      jQuery: 'jquery',
111      'window.jQuery': 'jquery'
112    })
113  ],
114  resolve: {
115    extensions: ['.js', '.ts'],
116    alias: {
117      '@actions': path.resolve(__dirname, `${srcPath}/actions`),
118      '@api_callers': path.resolve(__dirname, `${srcPath}/api_callers`),
119      '@components': path.resolve(__dirname, `${srcPath}/components`),
120      '@constants': path.resolve(__dirname, `${srcPath}/constants`),
121      '@containers': path.resolve(__dirname, `${srcPath}/containers`),
122      '@css': path.resolve(__dirname, `${srcPath}/css`),
123      '@etoe_test': path.resolve(__dirname, `${srcPath}/etoe_test`),
124      '@helpers': path.resolve(__dirname, `${srcPath}/helpers`),
125      '@masters': path.resolve(__dirname, `${srcPath}/masters`),
126      '@proptypes': path.resolve(__dirname, `${srcPath}/proptypes`),
127      '@reducers': path.resolve(__dirname, `${srcPath}/reducers`),
128      '@services': path.resolve(__dirname, `${srcPath}/services`),
129      '@images': path.resolve(__dirname, `${srcPath}/../public/images`),
130    }
131  }
132}
133

行動規範の内容に同意します

回答1件

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

私は経験がないですが、