Example in "Building Fieldtypes" isn't working

[palmiak]

I was trying to learn how to create a new Fieldtype so I followed the documentation on https://statamic.dev/extending/fieldtypes

It looks like either something is missing here, the docs are not up-to-date or I'm doing something wrong.

I ended up with an error in a console:

vue.common.prod.js:6 
        
    TypeError: Cannot read properties of undefined (reading 'inputType')
    at a.render (cp.js:19473:20)
    at e._render (vue.common.prod.js:6:35309)
    at a.r (vue.common.prod.js:6:67998)
    at fn.get (vue.common.prod.js:6:26596)
    at new fn (vue.common.prod.js:6:26514)
    at vue.common.prod.js:6:68012
    at kn.$mount (vue.common.prod.js:6:67874)
    at kn.$mount (vue.common.prod.js:6:93370)
    at init (vue.common.prod.js:6:19336)
    at vue.common.prod.js:6:56347

I already noticed that the path is wrong:

import Fieldtype from './TogglePasswordFieldtype.vue';
// Should be named [snake_case_handle]-fieldtype
Statamic.$components.register('toggle_password-fieldtype', Fieldtype);

the components/fieldtypes part was missing.

I'm using the latest version of Statamic (3.3.20).

[jasonvarga]

the components/fieldtypes part was missing.

Where do you mean? In import Fieldtype from './TogglePasswordFieldtype.vue';? This is just an example and you'd have to adjust it to the proper path of your file. But if it helps, we can update that.

[palmiak]

The first problem is that the:

<template>
    <div>
        <text-input :type="inputType" :value="value" @input="updateDebounced" />
        <label><input type="checkbox" v-model="show" /> Show Password</label>
    </div>
</template>
<script>
export default {
    mixins: [Fieldtype],
    data() {
        return {
            show: false
        };
    },
    computed: {
        inputType() {
            return this.show ? 'text' : 'password';
        }
    }
};
</script>

returns the error I mentioned.

The path problem - I would change this to import Fieldtype from './components/fieldtypes/TogglePasswordFieldtype.vue'; as this would be more in line with the https://statamic.dev/extending/control-panel#adding-assets-to-your-build-process docs.

[jackmcdade]

I ran into the same issue you did with the importing, so I updated the docs. Had no issues with the undefined error though. Maybe there was a copy and paste issue?