Cannot create a custom fieldtype

[markdost]

Each time I try to build a custom fieldtype by doing php please make:fieldtype CustomField I run into errors. I am following what's described here https://statamic.dev/extending/fieldtypes

In resources/js/app.js I also add the following:

import './bootstrap';

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

Whatever I try or do, I get that error.

[jackmcdade]

Do you run npm ci && npm run watch to compile the Vue module?

[markdost]

I tried running npm ci && npm run watch which results in an error:

npm ci && npm run watch
npm WARN prepare removing existing node_modules/ before installation

> [email protected] postinstall /public_html/node_modules/esbuild
> node install.js

added 49 packages in 6.453s
npm ERR! missing script: watch

I have also tried running normal npm run build which also gives an error:

npm run build

> @ build /public_html
> vite build

vite v3.2.6 building for production...
✓ 2 modules transformed.
[vite:build-import-analysis] Parse error @:4:11
file: /public_html/resources/js/components/fieldtypes/CustomField.vue:4:10
2:     <div>
3:         <text-input :value="value" @input="update" />
4:     </div>
             ^
5: </template>
error during build:
Error: Parse error @:4:11
    at parse$b (file:///public_html/node_modules/vite/dist/node/chunks/dep-1889fec9.js:32645:355)
    at Object.transform (file:///public_html/node_modules/vite/dist/node/chunks/dep-1889fec9.js:42462:27)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `vite build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above

[jasonvarga]

Did you add anything to your service provider? https://statamic.dev/extending/control-panel#using-vite

[markdost]

My public_html/app/Providers/AppServiceProvider.php looks like so:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

[markdost]

I have looked at https://statamic.dev/extending/control-panel#using-vite and AppServiceProvider.php now looks like:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Statamic\Facades\Statamic;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot()
    {
        Statamic::vite('app', [
            'resources/js/cp.js'
        ]);
    }
}

Which throws an error:
Class "App\Providers\Statamic" not found

[markdost]

Oh boy, my bad, my github copilot assumed it was use Statamic\Facades\Statamic; but needed to be use Statamic\Statamic;

All is well now and I have a custom field 'field' :D

Thank you so much for your patience and help!

[jasonvarga]

No worries, glad we got there!