ValidationError: CSS Loader Invalid Options
nuxt を v2.9 にあげようとしたら css-loader の validation error が出てしまった。
ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties
at validateOptions (/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.loader (/node_modules/css-loader/dist/index.js:44:28)
@ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-327 14:3-18:5 15:22-335
@ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
@ ./.nuxt/components/nuxt-loading.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
上記エラーは css-loader に対するオプションで、未定義のものを設定してしまうと発生する。 そのため、webpack.config.js の css-loader の option で渡しているオブジェクトでキーをタイポしているようなケースで起こる。
しかし今回の場合は、nuxtなのでwebpack.config.jsのcss-loaderは内部で定義されていて変更を加えていない。
css (options) { options.onlyLocals = this.onlyLocals const cssLoader = { loader: 'css-loader', options }
nuxt.js/style-loader.js at e7cc2757c3aea7076b82fc9c65700d48eab01586 · nuxt/nuxt.js · GitHub
おかしいと思ってnuxtのstyle-loaderを見てみると、 onlyLocals を設定していた。 つまりこいつが原因で落ちている。
webpackのcss-loaderを見てみると、 v3.0.0 で exportOnlyLocals が onlyLocals に変更されていた。
exportOnlyLocals option was remove in favor onlyLocals option
つまり、nuxtのstyle-loaderはきちんと最新に追従できていることになる。
手元のlocal環境でcss-loaderが古いのかと思って見てみると、確かに css-loader@^2.1.1 が入っていた。
おかしいなと思って依存関係を調べると、犯人はstorybookだった。 現時点でのmasterである v5.1.11 では css-loader@^2.1.1 が指定されている。
storybook/package.json at v5.1.11 · storybookjs/storybook · GitHub
試しに v5.2.0-beta.40 を入れたらエラーは出なくなった。 v5.2.0 をはやくリリースしてほしい。
storybook/package.json at v5.2.0-beta.40 · storybookjs/storybook · GitHub
