vue 3 + vuetify 3: Unknown node type in node creation at Array.map (<anonymous>)

Question

I'm migrating from vue2 to vue3 and also to vuetify 3. However, I can't set up vuetify 3 properly. I get the below error

Syntax Error: Error: Unknown node type in node creation at Array.map (anonymous)

In the following lines:

in ./node_modules/vuetify/lib/components/VList/VListItem.css
in ./node_modules/vuetify/lib/components/VCard/VCard.css
in ./node_modules/vuetify/lib/components/VBtn/VBtn.css

I tried to fix it by following links

[Bug Report][3.0.0-alpha.0] Vuetify 3 'Unknown node type in node creation' bug #14179

vuetify-loader

But no success.

vuetify.js:

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import colors from "vuetify/lib/util/colors";

// Vuetify
import { createVuetify } from "vuetify";

    export default createVuetify({
      theme: {
        themes: {
          options: { customProperties: true },
          light: {
            primary: "#FF6D00",
          },
          dark: {
            primary: "#FFCA28",
          },
        },
      },
      icons: {
        iconfont: "mdi", 
      },
    });

main.js:

const app = createApp({
  data: function () {
    return {
      currentRoute: window.location.pathname,
    };
  },    
  computed: {
    ViewComponent() {
      return routes[this.currentRoute] || NotFound;
    },
  },
  render() {
    return h(this.ViewComponent);
  },
});

Answer 1

You have an older version of autoprefixer that doesn't support @supports fully (https://github.com/postcss/autoprefixer/issues/1391). Updating postcss and autoprefixer to the latest versions will fix the error.