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

Question

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

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.

Is everything in your package.json using Webpack4 and Vue2? Also, did you moved some of the Vue config into the Nuxt one? — kissu
– kissu, Commented Aug 22, 2021 at 21:09
@kissu Hi, I use vue 2(without webpack (vue cli)). Here is my configs - codesandbox.io/s/proud-sea-8ocon?file=/package.json — Serafim
– Serafim, Commented Aug 22, 2021 at 21:15
I have same bug , can you show package.json (devDependencies ,dependencies) ? — Mm.Mirzaei.dev
– Mm.Mirzaei.dev, Commented Sep 4, 2021 at 7:05
@Mm.Mirzaei.dev Hi, Here it - gist.github.com/harddownloader/f80c300da13fff71166a7bbfeb3baed7 — Serafim
– Serafim, Commented Sep 4, 2021 at 12:54
@Mm.Mirzaei.dev please follow this one or ask a new question: stackoverflow.com/a/68730454/8816585 — kissu
– kissu, Commented Sep 4, 2021 at 13:41

kissu · Accepted Answer · 2021-08-23 13:08:35Z

2

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.

answered Aug 23, 2021 at 13:08

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serafim Over a year ago

it's work! Thank you! Here's what I did (I installed sass and css loader, which support webpack4 ): 1) yarn remove node-sass sass-loader css-loader 2) yarn add [email protected] 3) yarn add [email protected] -D 4) yarn add [email protected] -D

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related