Error adding components @park-ui/cli: FiberFailure

[pabgn]

Context After a fresh install of Panda & Ark UI for Vue, I ran:

npx @park-ui/cli components add button

And the output I got:

◇ An error occurred │ ◇ Error Details ───────────────────────────────╮ │ │ │ (FiberFailure) Error: An error has occurred │

I could not obtain any further information.

[cschroeter]

@pabgn

Thanks for reporting the issue. I've tried the CLI in a Vue (Nuxt) setup similar to the one in the Getting Started guide.

Could you provide a bit more context about your setup?

[pabgn]

@cschroeter sure! Package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "prepare": "panda codegen",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ark-ui/vue": "^3.6.0",
    "@aws-amplify/ui-vue": "^4.2.8",
    "@park-ui/cli": "^0.7.2",
    "aws-amplify": "^6.3.8",
    "core-js": "^3.8.3",
    "date-fns": "^3.6.0",
    "firebase": "^10.12.3",
    "primeicons": "^7.0.0",
    "register-service-worker": "^1.7.2",
    "uuid": "^10.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@pandacss/dev": "^0.42.0",
    "@park-ui/panda-preset": "^0.39.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Panda.config.mjs

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Whether to use css reset
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],

  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  jsxFramework: 'vue',
  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {},
  },

  // The output directory for your css system
  outdir: "styled-system",
});

Park-ui.json gets created with the following content:

{
  "$schema": "https://park-ui.com/registry/latest/schema.json",
  "importAlias": "~/*",
  "jsFramework": "vue",
  "outputPaths": {
    "componentsDir": "~/components/ui",
    "libDir": "~/lib"
  }
}

Plain Vue, no TypeScript. Thanks a lot!

[cschroeter]

@pabgn

Yeah, Vue developers don't use TypeScript that often. Right now, the CLI is designed to work with a tsconfig file. As a workaround, you can add one, even if you don't use TypeScript. Alternatively, you can fetch directly from the API:

https://park-ui.com/registry/latest/vue/components

I am unable to resolve this issue but feel free to come up with something if you have an idea.