Failed to resolve component: IconField

[KnightYoshi]

I'm running into this issue

Vue warn]: Failed to resolve component: IconField
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <PrimeInputText context= {_value: RefImpl, attrs: {…}, disabled: undefined, describedBy: ComputedRefImpl, fns: {…}, …} > 

Not quite sure what would be causing it. I've looked in the PrimeVue package to make sure that iconfield exists, so I'm not sure if I'm missing something or if it's an actual error

formkit.config.ts

import {DefaultConfigOptions} from '@formkit/vue';
import {primeInputs} from '@sfxcode/formkit-primevue';

const config: DefaultConfigOptions = {
    inputs: primeInputs,
};

export default config;

main.ts

import formKitConfig from './formkit.config';

const app = createApp(App);
app.use(formkit, defaultConfig(formKitConfig));

page component

<script setup lang="ts">
import {ref} from 'vue';

const schema = [
    {
        $el: 'h2',
        children: ['Register ', '$email'],
    },
    {
        $el: 'h3',
        children: 'Header Text H3',
    },
    {
        $formkit: 'primeInputText',
        name: 'email',
        label: 'Email',
        help: 'This will be used for your account.',
        validation: 'required|email',
    },
];

const data = ref({email: 'tom@sfxcode.com'});

</script>

<template>
    <div class="max-w-xl">
        <FormKitSchema
            :schema="schema"
            :data="data"
        />
    </div>
</template>

[dencs08]

Same issue here, seems to be the case with all of the sfxcode components right now. I've found a workaround: copy the src folder of the latest release and import it in formkit.config from there and not from node_modules:

formkit.config.ts import { primeInputs } from "@/components/utils/forms/formkit/src"; instead of import { primeInputs } from "@sfxcode/formkit-primevue";

note: it seems that in the 2.0.1 version there is still Dropdown component while it is deprecated in primevue 4.0.0 and Select component should be used instead.

• nuxt 3.12.2
• @sfxcode/formkit-primevue: 2.0.1 (installed as devDependency)
• primevue 4.0.0-rc.3
• tailwindcss-primeui 0.3.2

[KnightYoshi]

Same issue here, seems to be the case with all of the sfxcode components right now. I've found a workaround: copy the src folder of the latest release and import it in formkit.config from there and not from node_modules:

formkit.config.ts import { primeInputs } from "@/components/utils/forms/formkit/src"; instead of import { primeInputs } from "@sfxcode/formkit-primevue";

note: it seems that in the 2.0.1 version there is still Dropdown component while it is deprecated in primevue 4.0.0 and Select component should be used instead.

* nuxt 3.12.2

* @sfxcode/formkit-primevue: 2.0.1 (installed as devDependency)

* primevue 4.0.0-rc.3

* tailwindcss-primeui 0.3.2

Whoops, forgot the versions I'm using as well

• @sfxcode/formkit-primevue@2.0.0
• primevue@3.52.0

[sfxcode]

Hi, thanks for pointing out. I will try to fix this problem. Just wanted to start with supporting PrimeFaces 4 as soon as possible. Your bug descriptions are pretty helpful. Have to check the difference to the working 1.x versions. Dropdown will vanish with the next release, maybe i find some solution with the broken import path as well. I will be thankful for every help.

Have a good coding time,

Tom

[KnightYoshi]

Hi, thanks for pointing out. I will try to fix this problem. Just wanted to start with supporting PrimeFaces 4 as soon as possible. Your bug descriptions are pretty helpful. Have to check the difference to the working 1.x versions. Dropdown will vanish with the next release, maybe i find some solution with the broken import path as well. I will be thankful for every help.

Have a good coding time,

Tom

Much appreciated. I also wouldn't mind taking a look. Looks like the sample is in the dev directory? Anything I need to know?

I think this is crucial for the PrimeVue community, even though on Reddit it was mentioned that they're going to add FormKit support—since their approach, at least by this statement is to charge for that support. Which is understandable on their side, but gatekeeps it from everyone else. So I'm all for this!

[sfxcode]

Tried to fix your import in the latest (2.0.2) release for PrimeVue 4 (RC3).

Please try this build to see if it fix your problem.

Have a nice time,

Tom

[dencs08]

2.0.2 fixed the issue.

Thanks!