Nuxt build error

[rabichawila]

I am facing this error when building my project, it works fine on development, but when i build i get an error:

ERROR in ./node_modules/swiper/swiper-bundle.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/swiper/swiper-bundle.css)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 36

at /home/user/Desktop/Project//node_modules/swiper/swiper-bundle.css:153:3

~/plugins/swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

nuxt.config.js

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'swiper/swiper-bundle.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/swiper.js',
  ],

the error comes when i build

npm run build or npm run generate

[HamedJafarzadeh]

I managed to add it to Nuxt with making a plugin like this :

installed the libs:

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

plugins/vue-awesomeSwiper.js

import Vue from 'vue'
import {Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// import style
import 'swiper/swiper-bundle.min.css'

SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))

nuxt.config.js

plugins : [
{
src: '~/plugins/vue-awesomeSwiper.js', ssr: false},
...
]

Then it worked for me.

[virkse]

@rabichawila
Are you able to resolve this issue, I still unable to resolve.
It works fine on development side but when run the "npm run build" then is creates this error.

ERROR in ./node_modules/swiper/css/swiper.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/swiper/css/swiper.css)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 36
    at /var/www/oakland-2021/node_modules/swiper/css/swiper.css:147:3

If you can help, I'll be thank full.

[wildplant]

@rabichawila
Are you able to resolve this issue, I still unable to resolve.
It works fine on development side but when run the "npm run build" then is creates this error.

ERROR in ./node_modules/swiper/css/swiper.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/swiper/css/swiper.css)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 36
    at /var/www/oakland-2021/node_modules/swiper/css/swiper.css:147:3

If you can help, I'll be thank full.

me,too. I used tailwindcss2.2.4. is there a problem?

[Josh979]

Same here. Used to work fine until I updated Nuxt to use the newer postcss

[NguyenTam2206]

@virkse @rabichawila @Josh979
This issue is "calc() breaks when using 3+ variable fallbacks"
postcss/postcss-calc#104

You can rewrite swiper.css (related class):
From

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

to

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  /* width: calc(var(--swiper-navigation-size) / 44 * 27); */
  --step1: calc(var(--swiper-navigation-size) / 44);
  width: calc(var(--step1) * 27);
  /**************/
  height: var(--swiper-navigation-size);
  /* margin-top: calc(-1 * var(--swiper-navigation-size) / 2); */
  --step2: calc(-1 * var(--swiper-navigation-size));
  margin-top: calc(var(--step2) / 2);
  /**************/
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

[mobi35]

@virkse @rabichawila @Josh979
This issue is "calc() breaks when using 3+ variable fallbacks"
postcss/postcss-calc#104

You can rewrite swiper.css (related class):
From

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

to

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  /* width: calc(var(--swiper-navigation-size) / 44 * 27); */
  --step1: calc(var(--swiper-navigation-size) / 44);
  width: calc(var(--step1) * 27);
  /**************/
  height: var(--swiper-navigation-size);
  /* margin-top: calc(-1 * var(--swiper-navigation-size) / 2); */
  --step2: calc(-1 * var(--swiper-navigation-size));
  margin-top: calc(var(--step2) / 2);
  /**************/
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

This works for me!! Thankssss

[dzcpy]

I managed to add it to Nuxt with making a plugin like this :

installed the libs:

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

plugins/vue-awesomeSwiper.js

import Vue from 'vue'
import {Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// import style
import 'swiper/swiper-bundle.min.css'

SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))

nuxt.config.js

plugins : [
{
src: '~/plugins/vue-awesomeSwiper.js', ssr: false},
...
]

Then it worked for me.

What version of swiper are you using? I tried it but still failed

[saraband]

I managed to add it to Nuxt with making a plugin like this :
installed the libs:

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

plugins/vue-awesomeSwiper.js

import Vue from 'vue'
import {Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// import style
import 'swiper/swiper-bundle.min.css'

SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))

nuxt.config.js

plugins : [
{
src: '~/plugins/vue-awesomeSwiper.js', ssr: false},
...
]

Then it worked for me.

What version of swiper are you using? I tried it but still failed

It works for me with [email protected] and [email protected]

[cweachock]

has anyone gotten this error? Get this when trying to spin up local dev server.

 ✖ Nuxt Fatal Error   
   
   TypeError: swiper.useParams is not a function