npm install では上手くいくのにyarn installだとwebpackコンパイルに失敗する。
受付中
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,444
こんにちは。 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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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を生成できるようです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる