Fix ViewComponent::TemplateError: Could not find a template file or inline render method for ButtonComponent in Rails

This error occurs when ViewComponent cannot find a template file or an inline render method for your component class. ViewComponent looks for a matching template file in the same directory as the component class or expects a call method for inline rendering. Create the template file or define a call method in the component.

Reading the Stack Trace

Here's what each line means:

• view_component (3.10.0) lib/view_component/base.rb:245:in `compile': ViewComponent tries to compile the component but cannot find a template or call method.
• view_component (3.10.0) lib/view_component/base.rb:180:in `render_in': The render_in method is invoked when the component is rendered in a view.
• app/views/shared/_form.html.erb:15:in `_app_views_shared__form_html_erb__render': The partial at line 15 renders the ButtonComponent which triggers the error.

Common Causes

# app/components/button_component.rb
class ButtonComponent < ViewComponent::Base
  def initialize(label:, variant: :primary)
    @label = label
    @variant = variant
  end
end
# Missing: app/components/button_component.html.erb

# Component: app/components/button_component.rb
# Template:  app/views/components/button_component.html.erb (wrong location)
# Should be: app/components/button_component.html.erb

class ButtonComponent < ViewComponent::Base
  def initialize(label:)
    @label = label
  end
  # Missing call method for inline rendering
end

The Fix

Create the template file button_component.html.erb in the same directory as the component class. ViewComponent uses a convention where the template name matches the component class name with a .html.erb extension.

# app/components/button_component.rb exists but no template
class ButtonComponent < ViewComponent::Base
  def initialize(label:, variant: :primary)
    @label = label
    @variant = variant
  end
end

# app/components/button_component.rb
class ButtonComponent < ViewComponent::Base
  def initialize(label:, variant: :primary)
    @label = label
    @variant = variant
  end
end

# app/components/button_component.html.erb
# <button class="btn btn-<%= @variant %>">
#   <%= @label %>
# </button>

Testing the Fix

require 'rails_helper'

RSpec.describe ButtonComponent, type: :component do
  it 'renders a button with the label' do
    render_inline(ButtonComponent.new(label: 'Submit'))
    expect(page).to have_button('Submit')
  end

  it 'applies the variant class' do
    render_inline(ButtonComponent.new(label: 'Delete', variant: :danger))
    expect(page).to have_css('.btn-danger')
  end

  it 'defaults to primary variant' do
    render_inline(ButtonComponent.new(label: 'Save'))
    expect(page).to have_css('.btn-primary')
  end
end

Run your tests:

bundle exec rspec spec/components/button_component_spec.rb

Pushing Through CI/CD

git checkout -b fix/rails-view-component-template,git add app/components/button_component.html.erb,git commit -m "fix: add missing template for ButtonComponent",git push origin fix/rails-view-component-template

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:16
        env:
          POSTGRES_PASSWORD: postgres
        ports: ['5432:5432']
    steps:
      - uses: actions/checkout@v4
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true
      - run: bin/rails db:setup
      - run: bundle exec rspec

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

gem install bugstack

require 'bugstack'

Bugstack.init(api_key: ENV['BUGSTACK_API_KEY'])

Deploying the Fix (Manual Path)

1. Create the template file in the component directory.
2. Add component specs with render_inline.
3. Run the component test suite.
4. Open a pull request.
5. Merge and verify the component renders in staging.

Frequently Asked Questions