Magento 2 custom checkout input field based on custom component

Question

I am trying to add new select field that will have certain values when city is changed. To do that I need my custom js component because it does the adding/removing options from select. Below is my layout process plugin in which I have added my custom field:

public function afterProcess(
 \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
 array $jsLayout
) { 
 $this->_logger->info('***************** LayoutProcessor Plugin is called *****************');
 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children']['before-form']['children']['dealer'] = [
 'component' => 'SmSoftware_PostShip/js/form/element/dealer-id',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'ui/form/element/select',
 'options' => [],
 'id' => 'dealer'
 ],
 'dataScope' => 'shippingAddress.dealer',
 'label' => __('Dealer'),
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [
 'required-entry' => true
 ],
 'sortOrder' => 200,
 'id' => 'dealer'
 ];
 return $jsLayout;
}

Now, the field is not displayed on checkout_index_index.xml at all, but when I change the component value to Magento_Ui/js/form/element/select it shows.

require([
 'ko',
 'Magento_Ui/js/form/element/select',
 'jquery'
 ], function (ko, Select, $) {
 'use strict';
 console.log("City field is being observed....");
 return Select.extend({});

and its placed in view/frontend/web/js/form/element.

My custom component has the following value:

If anyone have any idea what the problem is please explain to me. Magento version is 2.4.2

Answer 1

I found the solution and it was a mistake in JS file. File shoud contain define instead of require on the first line. After correction component was normally visible on checkout page.