Nuxt 3: cannot use with @nuxtjs/tailwindcss module, [vite] Internal server error: [postcss] Cannot read property 'nodes' of undefined

[1isten]

Vuestic-ui version: 1.5.3

Steps to reproduce

1. create nuxt 3 project with yarn create vuestic
2. install @nuxtjs/tailwindcss module
3. update nuxt.config.ts to use @nuxtjs/tailwindcss module
4. run yarn dev

What is the expected behavior? No error is expected

What is the current behavior?

terminal output:

ERROR  1:48:27 PM [vite] Internal server error: [postcss] Cannot read property 'nodes' of undefined                                                                                         13:48:27
  Plugin: vite:css
  File: /Users/sten/Desktop/vuestic-app/node_modules/vuestic-ui/dist/es/src/components/va-modal/VaModal.css:undefined:undefined
      at /Users/sten/Desktop/vuestic-app/node_modules/vuestic-ui/dist/es/src/components/va-modal/VaModal.css:1:2584
      at /Users/sten/Desktop/vuestic-app/node_modules/postcss-custom-properties/dist/index.mjs:1:5587
      at walk (/Users/sten/Desktop/vuestic-app/node_modules/postcss-value-parser/lib/walk.js:19:7)
      at Function.walk (/Users/sten/Desktop/vuestic-app/node_modules/postcss-value-parser/lib/walk.js:15:7)
      at transformValueAST (/Users/sten/Desktop/vuestic-app/node_modules/postcss-custom-properties/dist/index.mjs:1:5441)
      at transformProperties (/Users/sten/Desktop/vuestic-app/node_modules/postcss-custom-properties/dist/index.mjs:1:6236)
      at Declaration (/Users/sten/Desktop/vuestic-app/node_modules/postcss-custom-properties/dist/index.mjs:1:8243)
      at LazyResult.visitTick (/Users/sten/Desktop/vuestic-app/node_modules/postcss/lib/lazy-result.js:502:16)
      at LazyResult.runAsync (/Users/sten/Desktop/vuestic-app/node_modules/postcss/lib/lazy-result.js:410:30)
      at async compileCSS (file:///Users/sten/Desktop/vuestic-app/node_modules/vite/dist/node/chunks/dep-3007b26d.js:36728:25)
      at async TransformContext.transform (file:///Users/sten/Desktop/vuestic-app/node_modules/vite/dist/node/chunks/dep-3007b26d.js:36194:56)
      at async Object.transform (file:///Users/sten/Desktop/vuestic-app/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
      at async loadAndTransform (file:///Users/sten/Desktop/vuestic-app/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)

browser output:

[kilakewe]

+1 experiencing this issue also. Nuxt version is 3.2.0

[aluarius]

Thanks for the report!

This issue seems to be already fixed in the upcoming Vuestic UI release.

For now, you can try the following:

1. Delete node_modules.
2. npm i vuestic-ui@1.5.4-next-8872b22a5-20230213

After this everything should be fine.

[1isten]

@aluarius Thanks

[1isten]

Hi @aluarius I just tried vuestic-ui@1.5.4-next-8872b22a5-20230213. It does fixed the error, but it seems no css is applied at all.

Below is the modal and button test result:

[aluarius]

Yea, we've already found this problem with next Vuestic UI version and Nuxt, right after my previous answer :c

It's already in fixing progress. @m0ksem can you please make new technical release after you'll fix it and link it here?

[aluarius]

@1isten we've made experimental release for you, that should solve all problems. Please, check it out.

1. Delete node_modules.
2. npm i vuestic-ui@0.0.0-experimental-5cff9945d-20230214

[1isten]

Hi @aluarius thanks for your quick follow up! I just tried vuestic-ui@0.0.0-experimental-5cff9945d-20230214, the css is working now.

But there is a warning message when I run yarn dev:

I don't know if thats the problem but I've tested the modal component, modal z-index seems to be incorrect:

testing ui before modal open:

testing ui after modal open:

[1isten]

the --va-modal-z-index is missing?

[aluarius]

But there is a warning message modal z-index seems to be incorrect

It's not critical issues because of experimental release, i'll move them to separate topics and fix them until the primary release at the end of this month. So, all you need is to just update Vuestic after it :)

Meanwhile, you can just pass you own z-index variable value to the component - they're expected to be overwritable.

[m0ksem]

@aluarius, this warning is related to VaViewer component, must be justify-content: flex-end, not justify-content: end. I fixed it in nuxt-docs branch.