[Bug]: Error in the build of the auto form with Vite and TypeScript

[AytoKyto]

Reproduction

https://stackblitz.com/edit/vitejs-vite-7lz8nd?file=src%2Flib%2Futils.js

Describe the bug

During the build, I encounter several TypeScript errors, specifically TS2502, TS2550, TS7022, and TS2339, only within the files of the auto form component. Notably, there are code errors related to the .toReversed() method in the dependencie.ts file. I set up the project from scratch following the documentation, but the issue persists. I also tried starting from a starter template to test, and I’m still facing the same problem. Here’s the error code:

> vue-tsc -b && vite build

src/components/ui/auto-form/AutoFormFieldBoolean.vue:12:7 - error TS7022: 'booleanComponent' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

12 const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
        ~~~~~~~~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:12:35 - error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

12 const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:16:40 - error TS2339: Property 'fieldName' does not exist on type '{}'.

16   <FormField v-slot="slotProps" :name="fieldName">
                                         ~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:22:20 - error TS2339: Property 'booleanComponent' does not exist on type '{}'.

22               :is="booleanComponent"
                     ~~~~~~~~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:24:26 - error TS2339: Property 'disabled' does not exist on type '{}'.

24               :disabled="disabled"
                           ~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:30:31 - error TS2339: Property 'config' does not exist on type '{}'.

30         <AutoFormLabel v-if="!config?.hideLabel" :required="required">
                                ~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:30:61 - error TS2339: Property 'required' does not exist on type '{}'.

30         <AutoFormLabel v-if="!config?.hideLabel" :required="required">
                                                              ~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:31:14 - error TS2339: Property 'config' does not exist on type '{}'.

31           {{ config?.label || beautifyObjectName(label ?? fieldName) }}
               ~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:31:31 - error TS2339: Property 'beautifyObjectName' does not exist on type '{}'.

31           {{ config?.label || beautifyObjectName(label ?? fieldName) }}
                                ~~~~~~~~~~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:31:50 - error TS2339: Property 'label' does not exist on type '{}'.

31           {{ config?.label || beautifyObjectName(label ?? fieldName) }}
                                                   ~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:31:59 - error TS2339: Property 'fieldName' does not exist on type '{}'.

31           {{ config?.label || beautifyObjectName(label ?? fieldName) }}
                                                            ~~~~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:35:30 - error TS2339: Property 'config' does not exist on type '{}'.

35       <FormDescription v-if="config?.description">
                               ~~~~~~

src/components/ui/auto-form/AutoFormFieldBoolean.vue:36:12 - error TS2339: Property 'config' does not exist on type '{}'.

36         {{ config.description }}
             ~~~~~~

src/components/ui/auto-form/constant.ts:10:14 - error TS7022: 'INPUT_COMPONENTS' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

10 export const INPUT_COMPONENTS = {
               ~~~~~~~~~~~~~~~~

src/components/ui/auto-form/dependencies.ts:35:62 - error TS2550: Property 'toReversed' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2023' or later.  

35     const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
                                                               ~~~~~~~~~~

src/components/ui/auto-form/dependencies.ts:36:84 - error TS2550: Property 'toReversed' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2023' or later.  

36     const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
                                                                                     ~~~~~~~~~~

src/components/ui/auto-form/dependencies.ts:39:70 - error TS2550: Property 'toReversed' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2023' or later.  

39       const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
                                                                       ~~~~~~~~~~

src/components/ui/auto-form/interface.ts:27:3 - error TS2502: 'component' is referenced directly or indirectly in its own type annotation.

27   component?: keyof typeof INPUT_COMPONENTS | Component
    ~~~~~~~~~


Found 18 errors.

System Info

{
  "name": "XXXXXXXXXXX",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host --port 8080",
    "build": "vue-tsc -b && vite build",
    "build-staging": "vue-tsc -b && vite build --mode=staging",
    "build-production": "vue-tsc -b && vite build --mode=production",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-pattern .gitignore"
  },
  "dependencies": {
    "@eslint/eslintrc": "^3.1.0",
    "@tanstack/vue-table": "^8.20.5",
    "@vee-validate/zod": "^4.14.6",
    "@vueuse/core": "^11.2.0",
    "class-variance-authority": "^0.7.0",
    "globals": "^15.11.0",
    "jwt-decode": "^4.0.0",
    "lucide-vue-next": "^0.454.0",
    "pinia": "^2.2.4",
    "pinia-plugin-persistedstate": "^4.1.2",
    "radix-vue": "^1.9.8",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "typescript-eslint": "^8.12.2",
    "vee-validate": "^4.14.6",
    "vite-plugin-vue-devtools": "^7.5.2",
    "vue": "^3.5.12",
    "vue-router": "^4.4.5",
    "xior": "^0.6.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@iconify/vue": "^4.1.2",
    "@types/node": "^22.7.8",
    "@types/tailwindcss": "^3.0.11",
    "@typescript-eslint/eslint-plugin": "^8.12.2",
    "@typescript-eslint/parser": "^8.12.2",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/eslint-config-typescript": "^14.1.3",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.12.0",
    "eslint-plugin-vue": "^9.29.0",
    "postcss": "^8.4.47",
    "postcss-import": "^16.1.0",
    "tailwindcss": "^3.4.14",
    "typescript": "~5.6.2",
    "vite": "^5.4.9",
    "vue-tsc": "^2.1.10"
  }
}

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[bubu-bin]

I am also facing similar issue with AutoForm

Reproduction

This error only occurs when using IOS (every browser) or Safari.
When using dependencies with DepenedencyType.SETS_OPTIONS. The below error appears:

Unhandled Promise Rejection: TypeError: source.split(".").toReversed is not a function. (In 'source.split(".").toReversed()', 'source.split(".").toReversed' is undefined)

I have modified inside auto-form/dependencies.ts

const [sourceLast, ...sourceInitial] = source.split('.').toReversed();
const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed();
const [_currentLast, ...currentInitial] = [...fieldName.split('.')].reverse();

to

const [sourceLast, ...sourceInitial] = [...source.split('.')].reverse();
const [_targetLast, ...targetInitial] = [...(dep.targetField as string).split('.')].reverse();
const [_currentLast, ...currentInitial] = [...fieldName.split('.')].reverse();

and it works.
I did not consider any potential issues arising from that change or performed tests.