don't recognize my own component using form - method missing -

[mattszein]

I follow the README related to create my own component: -Building your own components-

But didn't work, it raised an error:

undefined method 'labeled' for #<CustomFormBuilder:0x00007fb5e059c3b8 @__component_klass_cache={}, @nested_child_index={}, @options={:allow_method_names_outside_object=>true, :skip_default_ids=>false, :builder=>CustomFormBuilder, :class=>"contents"}, @template=#<ActionView::Base:0x0000000002eae0>, @object=#<User id: nil, email: nil, name: nil, created_at: nil, updated_at: nil>, @object_name="user", @default_options={:skip_default_ids=>false, :allow_method_names_outside_object=>true}, @default_html_options={}, @multipart=nil, @index=nil, @validation_context=nil>

Code: app/helpers/custom_form_builder.rb

class CustomFormBuilder < ViewComponent::Form::Builder
   namespace "Core::Form"
end

app/components/core/form/labeled_component.rb

class Core::Form::LabeledComponent < ViewComponent::Form::LabelComponent
end

app/components/core/form/labeled_component.html.erb

<div class="relative z-0 w-full mb-6 group">
  <%= content %>
  <label for="<%= method_name %>" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"><%= label_text %></label>
</div>

<%= form_with url: "/search", builder: CustomFormBuilder do |f| %>
  <%= f.labeled :first_name do %>
    <%= f.text_field :first_name %>
  <% end %>
<% end %>

Am I missing something?

[mattszein]

Well, it works if i add the method in CustomFormBuilder:

def labeled(method, text = nil, options = {}, &block)
    render_component(:labeled, @object_name, method, text, objectify_options(options), &block)
end