search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
627 stars 105 forks source link

Generate script fails on VCarousel component #438

Open saike opened 3 years ago

saike commented 3 years ago

Module version ^1.11.3 Describe the bug

npm run generate command fails with sass error

To Reproduce

Steps to reproduce the behavior:

  1. add VCarousel to app
  2. run in shell npm run generate

Expected behavior App built success

Screenshots image

Additional context I tried to change vue.config.js and installed sass, but error still exist. npm run dev works well. Carousel component works as expected. But, if i add 'vuetify.treeShake: true' in nuxt.config, i have same error in dev mode too.

Screenshot 2021-04-17 at 13 14 08
saike commented 3 years ago

i manually setted treeShake: false and error disappeared. I don't know can this classified as bug. If you think not, close this issue.

larzon83 commented 3 years ago

Can you show your package.json?

saike commented 3 years ago 
{
  "name": "takeswap-frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "vuetify": "^2.4.9"
  }
}
larzon83 commented 3 years ago

devDeps too please. BTW: @nuxtjs/vuetify and vuetify should be in devDeps, not deps.

DevSchmidtchen commented 3 years ago

I am getting a similar error since today (it worked perfectly before), but with other components (VSelect and VWindow) and by using nuxt build. Treeshaking doesn't change anything in my case.

ERROR in ./node_modules/vuetify/src/components/VSelect/VSelect.sass
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
   ╷
70 │       position: relative
   │                         ^
   ╵
  node_modules/vuetify/src/components/VSelect/VSelect.sass 70:25  root stylesheet
    at /usr/src/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /usr/src/app/node_modules/sass-loader/dist/index.js:62:7
    at Function.call$2 (/usr/src/app/node_modules/sass/sass.dart.js:92439:16)
    at _render_closure1.call$2 (/usr/src/app/node_modules/sass/sass.dart.js:80990:12)
    at _RootZone.runBinary$3$3 (/usr/src/app/node_modules/sass/sass.dart.js:27220:18)
    at _FutureListener.handleError$1 (/usr/src/app/node_modules/sass/sass.dart.js:25776:19)
    at _Future__propagateToListeners_handleError.call$0 (/usr/src/app/node_modules/sass/sass.dart.js:26074:49)
    at Object._Future__propagateToListeners (/usr/src/app/node_modules/sass/sass.dart.js:4536:77)
    at _Future._completeError$2 (/usr/src/app/node_modules/sass/sass.dart.js:25906:9)
    at _AsyncAwaitCompleter.completeError$2 (/usr/src/app/node_modules/sass/sass.dart.js:25560:12)
    at Object._asyncRethrow (/usr/src/app/node_modules/sass/sass.dart.js:4335:17)
    at /usr/src/app/node_modules/sass/sass.dart.js:12852:20
    at _wrapJsFunctionForAsync_closure.$protected (/usr/src/app/node_modules/sass/sass.dart.js:4360:15)
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js 56:0-54
 @ ./node_modules/vuetify/lib/components/VSelect/index.js
 @ ./src/components/atoms/StyleFilter.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

ERROR in ./node_modules/vuetify/src/components/VWindow/VWindow.sass
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
  ╷
6 │   overflow: hidden
  │                   ^
  ╵
  node_modules/vuetify/src/components/VWindow/VWindow.sass 6:19  root stylesheet
    at /usr/src/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/usr/src/app/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /usr/src/app/node_modules/sass-loader/dist/index.js:62:7
    at Function.call$2 (/usr/src/app/node_modules/sass/sass.dart.js:92439:16)
    at _render_closure1.call$2 (/usr/src/app/node_modules/sass/sass.dart.js:80990:12)
    at _RootZone.runBinary$3$3 (/usr/src/app/node_modules/sass/sass.dart.js:27220:18)
    at _FutureListener.handleError$1 (/usr/src/app/node_modules/sass/sass.dart.js:25776:19)
    at _Future__propagateToListeners_handleError.call$0 (/usr/src/app/node_modules/sass/sass.dart.js:26074:49)
    at Object._Future__propagateToListeners (/usr/src/app/node_modules/sass/sass.dart.js:4536:77)
    at _Future._completeError$2 (/usr/src/app/node_modules/sass/sass.dart.js:25906:9)
    at _AsyncAwaitCompleter.completeError$2 (/usr/src/app/node_modules/sass/sass.dart.js:25560:12)
    at Object._asyncRethrow (/usr/src/app/node_modules/sass/sass.dart.js:4335:17)
    at /usr/src/app/node_modules/sass/sass.dart.js:12852:20
    at _wrapJsFunctionForAsync_closure.$protected (/usr/src/app/node_modules/sass/sass.dart.js:4360:15)
 @ ./node_modules/vuetify/lib/components/VWindow/VWindow.js 17:0-54
 @ ./node_modules/vuetify/lib/components/VTabs/VTabsItems.js
 @ ./node_modules/vuetify/lib/components/VTabs/VTabs.js
 @ ./node_modules/vuetify/lib/components/VTabs/index.js
 @ ./src/pages/_username/beats/_id.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

My dependencies and devDependencies:

"dependencies": {
    "firebase": "^8.4.1",
    "nuxt": "^2.15.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/eslint-parser": "^7.13.14",
    "@nuxt/types": "^2.15.4",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.11.3",
    "@vue/test-utils": "^1.1.4",
    "babel-jest": "^26.6.3",
    "eslint": "^7.24.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "jest": "^26.6.3",
    "ts-jest": "^26.5.5",
    "vue-jest": "^3.0.7"
  }
Semkoo commented 3 years ago

i manually setted treeShake: false and error disappeared. I don't know can this classified as bug. If you think not, close this issue.

This worked on my end, but what if you are declaring a custom SASS variable how its doc here

DevSchmidtchen commented 3 years ago

treeShake: false did the trick for me as well (I just didn't realise). But this shouldn't be the final solution, treeshaking should be enabled at the end...