treeShake option gives SassError: Expected identifier

[M-Barari]

Module version Nuxt 2.15.4 Nuxt/Vuetify 1.11.3

Describe the bug every thing was fine and suddenly got these errors when deleted node_modules and package-lock.json and then used npm i and tried run the project via npm run dev or npm run build .

Screenshots

Additional context this is my package.json file

{
  "name": "myproject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/google-gtag": "^1.0.4",
    "@nuxtjs/gtm": "^2.4.0",
    "chart.js": "^2.9.3",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.9.1",
    "jquery": "^3.5.1",
    "nuxt": "^2.15.3",
    "swiper": "^5.4.5",
    "v-viewer": "^1.5.1",
    "vee-validate": "^3.3.7",
    "vue-awesome-swiper": "^4.1.1",
    "vue-chartjs": "^3.5.0",
    "vue-cropperjs": "^4.1.0",
    "vue-easy-dnd": "^1.10.2",
    "vue-glide-js": "^1.3.14",
    "vue-persian-datetime-picker": "^2.2.0",
    "vue-product-zoomer": "^3.0.1",
    "vue-slick-carousel": "^1.0.6",
    "vue-sweetalert2": "^4.2.1",
    "vue2-editor": "^2.10.2",
    "vuedraggable": "^2.24.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/vuetify": "1.11.3",
    "flipclock": "^0.10.8",
    "font-awesome": "^4.7.0",
    "noty": "^3.2.0-beta",
    "nuxt-gsap-module": "^1.2.1",
    "css-loader": "^5.0.0",
    "sass-loader": "^10.1.1",
    "less-loader": "^6.1.2"
  }
}

and my nuxt.config

import colors from 'vuetify/es5/util/colors'
const env = require('dotenv').config()
const webpack = require('webpack')
export default {
  telemetry: false,
  loading: {
    color: 'green',
    failedColor: 'red',
    height: '3px'
  },
  head: {
    title: process.env.SITE_TITLE + ' | ' + process.env.SITE_SHORT_DESC || '',
    htmlAttrs: {
      lang: process.env.SITE_LANGUAGE || 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: process.env.SITE_KEYWORDS || '' },
      { hid: 'description', name: 'description', content: process.env.SITE_DESCRIPTION || '' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: process.env.SITE_FAVICON },
      { rel: 'canonical', href: process.env.SITE_BASE_URL },
    ]
  },
  css: [
      '~/assets/scss/vuetify.scss',
      '~/assets/scss/style.scss',
      '@mdi/font/css/materialdesignicons.css',
      'font-awesome/css/font-awesome.min.css',
      '@fortawesome/fontawesome-free/css/all.css',
      '~/assets/scss/media.scss',
      '~/assets/scss/customization.scss',
      '~/assets/scss/sweetalert.scss',
      '~/assets/scss/noty.scss',
      '~/assets/scss/flipclock.scss',
      '~/assets/scss/glide.scss',
      '~/assets/scss/sorting.scss',
      '~/assets/scss/cropper.scss',
      '~/assets/scss/transitions.scss',
      '~/assets/scss/product-zoom.scss',
      'vue-slick-carousel/dist/vue-slick-carousel.css',
      'swiper/css/swiper.css',
  ],
  plugins: [
      'plugins/mixins/reqerrors.js',
      'plugins/mixins/user.js',
      'plugins/mixins/language.js',
      'plugins/mixins/shopinfo.js',
      'plugins/mixins/formattedprice.js',
      'plugins/mixins/utils.js',
      'plugins/mixins/cms.js',
      'plugins/mixins/client.js',
      'plugins/mixins/cart.js',
      'plugins/axios.js',
      'plugins/veevalidate.js',
      'plugins/noty.js',
      'plugins/glide.js',
      '@plugins/vuedraggable',
      '@plugins/vuedraggable',
      '@plugins/vue-slick-carousel.js',
      {src: 'plugins/vuepersiandatepicker.js', mode: 'client'},
      {src: 'plugins/cropper.js', mode: 'client'},
      {src: 'plugins/vue-product-zoomer.js', mode: 'client'},
      {src: 'plugins/vueeditor.js', mode: 'client'},
      {src: 'plugins/nuxt-swiper-plugin.js', mode: 'client' }
  ],
  buildModules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/vuetify',
    '@nuxtjs/device',
    'nuxt-gsap-module',
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    ['vue-sweetalert2/nuxt',
      {
        confirmButtonColor: '#29BF12',
        cancelButtonColor: '#FF3333'
      }
    ],
    'cookie-universal-nuxt',
    '@nuxtjs/gtm',
    '@nuxtjs/google-gtag',
  ],
  device: {
    refreshOnResize: true
  },
  gtm: {
    id: process.env.GOOGLE_TAGS_ID,
    debug: false
  },
  'google-gtag': {
    id: process.env.GOOGLE_ANALYTICS_ID,
    debug: false
  },
  gsap: {
    extraPlugins: {
      cssRule: false,
      draggable: false,
      easel: false,
      motionPath: false,
      pixi: false,
      text: false,
      scrollTo: false,
      scrollTrigger: false
    },
    extraEases: {
      expoScaleEase: false,
      roughEase: false,
      slowMo: true,
    }
  },
  axios: {
    baseURL: process.env.API_BASE_URL,
  },
  auth: {
      strategies: {
        local: {
          endpoints: {
            login: { url: 'auth/login', method: 'post', propertyName: 'token' },
            logout: { url: 'auth/logout', method: 'post' },
            user: { url: 'auth/info', method: 'get', propertyName: '' }
          }
        }
      },
      redirect: {
        login: '/login',
        home: '',
        logout: '/login'
      },
      cookie: {
        prefix: 'auth.',
        options: {
          path: '/',
          maxAge: process.env.AUTH_COOKIE_MAX_AGE
        }
      }
  },
  publicRuntimeConfig: {
    gtm: {
      id: process.env.GOOGLE_TAGS_ID
    },
    'google-gtag': {
      id: process.env.GOOGLE_ANALYTICS_ID,
    }
  },
  vuetify:{
    rtl: process.env.SITE_DIRECTION === 'rtl' ? true : false ,
    customVariables: ['~/assets/scss/stylevariables.scss'],
    icons: {
      iconfont: 'mdi',
    },
    treeShake: true,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  build: {
    transpile: ['vee-validate/dist/rules'],
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: "jquery",
        "window.jQuery": "jquery",
        '_': 'lodash'
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ],
    // postcss: {
    //   preset: {
    //     features: {
    //       customProperties: false,
    //     },
    //   },
    // },
    loaders: {
      scss: {
        additionalData: `
          $theme_body_color:${process.env.THEME_BODY_COLOR};
          $theme_main_color:${process.env.THEME_MAIN_COLOR};
          $theme_main_color2:${process.env.THEME_MAIN_COLOR2};
          $theme_side_color:${process.env.THEME_SIDE_COLOR};
          $theme_side_color2:${process.env.THEME_SIDE_COLOR2};
          $theme_link_color:${process.env.THEME_LINK_COLOR};
        `
      }
    },
  }
}

[samanar]

faced the same problem in production. only occurs when using some components like v-tabs or v-select or v-autocomplete. others work fine.

[M-Barari]

@samanar , Mine was working just fine !!! when re-installed packages , BOOM!! any idea? tried "sass": "^1.32.10", "sass-loader": "^11.0.1" and achieved a new error!

 ERROR  Failed to compile with 1 errors                                                                                                                                                  friendly-errors 19:10:29

 ERROR  in ./assets/scss/vuetify.scss                                                                                                                                                    friendly-errors 19:10:29

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                       friendly-errors 19:10:29
TypeError: this.getOptions is not a function
    at Object.loader (C:\CODES\shopppro\node_modules\sass-loader\dist\index.js:25:24)
                                                                                                                                                                                         friendly-errors 19:10:29
 @ ./assets/scss/vuetify.scss 4:14-227 15:3-20:5 16:22-235
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[larzon83]

Just created a fresh create-nuxt-app (with Vuetify) and everything is fine. npm run dev and npm run build - no errors.

[lukaszmoskwa]

Same issue as @M-Barari with the exact same versions of Nuxt and nuxtjs/vuetify.

I noted that commenting the position: relative line solves the issue and allows me to finish the build correctly. Of course it is not viable

[deven200]

got same issue. SassError: Expected identifier. ╷ 70 │ position: relative │ ^

[samanar]

create a blank new nuxt app and call v-tabs in one of the pages. this error only occurs with some of the components. i tried downgrading various packages but no luck so far

[tatemono]

Hi everyone, same issue for me - I am hosting production website on Netlify - npm run dev works fine on Local dev npm run generate did not work but now is working on Local dev - I have no idea why exactly. Maybe because I added the following in my nuxt.config.js // Build Configuration: https://go.nuxtjs.dev/config-build build: { loaders: { sass: { sassOptions: { indentedSyntax: true } } } } npm run generate on Netlify generates SassError as mentioned by @M-Barari The error is directly connected to the Vuetify components one is using in his Layout. For me this is V-Tabs ( V-Window), but there are surely others that are involved.

[tatemono]

Duplicate issue with #438

[tatemono]

vuetify: { customVariables: ['~/assets/variables.scss'], treeShake: false,

Changing treeShake to false did the trick for me as well

[M-Barari]

Last night i finally found the culprit in my project by installing a fresh nuxt with vuetify and adding my packages and other files one by one! the only thing that i didn't change was vuetify config in nuxt.config.js . so removed treeShake and every thing worked just fine.

[M-Barari]

Well , looks like it only solved the problem in dev ; by build i still got the error. so tried treeShake: false and problem solved in build too.

[larzon83]

The issue is dart-sass, see https://github.com/sass/dart-sass/issues/1287

In package.json add this to devDependendies: "sass": "1.32.8"

[deven200]

treeShake: false worked for me too. thanks . save my time.

nuxt.config.js
 vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: false
 }

[flozero]

Nothing is working for me... If i downgrade sass and sass loader now i have this... I am using owl preset and using a new nuxt app