CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsserver-side-rendering
Serafim
Serafim

Reputation: 485

Error after added Nuxt to my vue project (vue-style-loader css error)

Help me please. Added Nuxt(SSR) to the my vue project. All moved to the root of the project, created a page folder. The following error appeared:

 ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./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&)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    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 (/app/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
        at Object.loader (/app/node_modules/css-loader/dist/index.js:36:28)
     @ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./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
     @ ./.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 ./.nuxt/client.js

enter image description here

code from nuxt.config.js:

import { resolve } from 'path'

export default {
  alias: {
    style: resolve(__dirname, './assets/style'),
  },
}

As I understand the error is related to the setting of the Nuxt.

Upvotes: 1

Views: 4030

Answers (1)

kissu
kissu

Reputation: 46602

In your package.json you do have sass-loader set to ^12.1.0, meanwhile the package introduces a breaking change during v11.0.0.

It requires Webpack5, which Nuxt is not compatible as of today. If you downgrade it down to v10.1.1 (and all related packages like node-sass), you should be fine.

Upvotes: 2

Related Questions