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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

2528閲覧

[Vue.js/Nuxt.js]css-loaderに関するエラーを解消したいです

jpskgc

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2021/11/20 08:57

編集2021/11/20 12:16

要約

新しいNuxt.jsのプロジェクトをcreate nuxt-appコマンドを実行して作成しました。(SPAモード)
作成直後はyarn devでローカルマシン上に問題なくSPA画面を起動できました。
しかしその後、Storybookをインストール後に再度yarn devを実行すると以下のエラーが発生して起動に失敗している状態です。

ERROR Failed to compile with 1 errors friendly-errors 17:38:56 ERROR in ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css& friendly-errors 17:38:56 Module build failed (from ./node_modules/css-loader/dist/cjs.js): friendly-errors 17:38:56 ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options.modules has an unknown property 'compileType'. These properties are valid: object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? } at validate (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11) at Object.loader (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/css-loader/dist/index.js:36:28) friendly-errors 17:38:56 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib??vue-loader-options!./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css& 4:14-385 15:3-20:5 16:22-393 @ ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css& @ ./layouts/error.vue @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

こちらのエラーを解消する手段をお手数ですがご教授願いたいです。

環境

Ubuntu20.04

コード

作業しているリポジトリは以下となります。お手数ですが、ご確認よろしくお願い致します。
https://github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/tree/cssloader-error

追記(2021/11/20 21:00)

postcssのバージョンを7系に落としたところ、今度はpostcss-loaderのエラーに変わりました

ERROR Failed to compile with 1 errors friendly-errors 21:12:16 ERROR in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& friendly-errors 21:12:16 Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): friendly-errors 21:12:16 ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'order'. These properties are valid: object { postcssOptions?, execute?, sourceMap?, implementation? } at validate (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/schema-utils/dist/validate.js:105:11) at Object.loader (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/postcss-loader/dist/index.js:43:29) friendly-errors 21:12:16 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-378 15:3-20:5 16:22-386 @ ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& @ ./.nuxt/components/nuxt-error.vue @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

https://shimer-system.com/blog/archives/722
こちらを参考にして以下をインストール/更新したところ解消しました。

yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

投稿2021/11/20 12:35

jpskgc

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問