Laravel

npm run devコマンドが失敗する

スポンサーラベル
Laravel

以前の記事でLaravel6.0＋vue.jsのセットアップまでをDockerで行えるようにしたのですが、最近つかってみたら「npm run dev」で失敗するようになってました。
回避方法を見つけましたので参考にしてください

Laravel6.x+Vue.js環境をDockerで速攻で構築する
少し前にDockerで２ステップでlaravel環境を構築する、という記事をアップしたのですが、今回はLaravelと共にVue.jsもセットアップしたdocker-compose+初期セットアップ...
syachiku.net

環境

  • laravel 6.*
  • vue 2.5
  • nodejs v6.17.1
  • npm v3.10.10

エラーログはこんな感じ

# npm run dev

> @ dev /var/www/html/tutorial
> npm run development


> @ development /var/www/html/tutorial
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                                                                                                                  10:55:28 PM

 error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/tutorial/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/var/www/html/tutorial/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/var/www/html/tutorial/node_modules/webpack/lib/NormalModule.js:316:20)
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/var/www/html/tutorial/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

 error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/tutorial/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/var/www/html/tutorial/node_modules/sass-loader/dist/index.js:36:28)

 @ ./resources/sass/app.scss 2:14-253

     Asset      Size   Chunks             Chunk Names
/js/app.js  1.39 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/tutorial/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/var/www/html/tutorial/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/var/www/html/tutorial/node_modules/webpack/lib/NormalModule.js:316:20)
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/html/tutorial/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/var/www/html/tutorial/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/tutorial/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/var/www/html/tutorial/node_modules/sass-loader/dist/index.js:36:28)
 @ ./resources/sass/app.scss 2:14-253

npm ERR! Linux 4.19.76-linuxkit
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "development"
npm ERR! node v6.17.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/html/tutorial/npm-debug.log

npm ERR! Linux 4.19.76-linuxkit
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.17.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/html/tutorial/npm-debug.log

結果

npmを入れ直したりしたのですが、ダメでした。最終的にはpackage.jsonに記載されていた「node-sass」を削除して代わりに「sass-loader」を追加したところ改善しました！

もしすでに「node-sass」ではなく「sass-loader」が含まれていた場合にはバージョンを7.xxとしてみてください。
“sass-loader”: “^7.0.0”,

# vi package.json
この行を削除
"node-sass": "^4.13.1",
この行を追加
"sass-loader": "^7.*",




node_modulesディレクトリを削除
# rm -rf node_modules/
再度インストール
# npm install

以上です。

スポンサーラベル