Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt build error

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:9

Top GitHub Comments

23reactions

HamedJafarzadehcommented, Mar 25, 2021

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.

18reactions

NguyenTam2206commented, Jul 27, 2021

@virkse @rabichawila @Josh979 This issue is “calc() breaks when using 3+ variable fallbacks” https://github.com/postcss/postcss-calc/issues/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));
}

.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));
}