Lookbook fail with poor feedback (Sometimes)

[DRBragg]

This is a bit of an odd one so I apologize in advance. We're also on an older platform (Rails 5.1 and Ruby 2.5 😬 ) so I'm not sure how much of that plays into this. I try to open a PR when I find an older Ruby/Rails compatibility issue but this one has me a bit stumped.

Some background:

• We're upgrading to lookbook v1 (1.0.8) 👀
• Rails: 5.1 🛤️
• Ruby: 2.5 💎
• ViewComponent: 2.72 (I dont have a good emoji for this)
• Lookbook engine mounted at /components
• No "pages" (yet), only previews
• Configuring lookbook in an initializer (config/initializers/lookbook.rb) the looks like this:

BigRed::Application.configure do
  config.lookbook.auto_refresh = false
  config.lookbook.experimental_features = [:pages]
  config.lookbook.listen = false
  config.lookbook.page_paths = ["spec/components/docs"]
  config.lookbook.project_name = "Big Red Components"
  config.lookbook.ui_favicon = "/favicon.ico"
end

Previously, when navigating to /components we'd see the default "select a component" screen. After updating we get:

Here's the console backtrace but it isn't very helpful

Processing by Lookbook::ApplicationController#index as HTML
  Rendering /app/bundler/root/gems/ruby/2.5.0/gems/lookbook-1.0.8/app/views/lookbook/index.html.erb within layouts/lookbook/application
  Rendered /app/bundler/root/gems/ruby/2.5.0/gems/lookbook-1.0.8/app/views/lookbook/index.html.erb within layouts/lookbook/application (13.6ms)
  Rendering /app/bundler/root/gems/ruby/2.5.0/gems/lookbook-1.0.8/app/views/layouts/lookbook/shell.html.erb
  Rendered /app/bundler/root/gems/ruby/2.5.0/gems/lookbook-1.0.8/app/views/layouts/lookbook/shell.html.erb (561.1ms)
Completed 500 Internal Server Error in 3146ms (ActiveRecord: 0.0ms)
ActionView::Template::Error (undefined method `dropdown' for #Button::Component:0x00007fbad8525d38):

12:         <%= content_for :panel_css -%>

13:       </style>

14:     <% end %>

15:

16:     <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>

17:       <% header.branding { config.project_name } %>

18:     <% end %>
app/components/button/component.html.erb:3:in block in call' app/components/button/component.html.erb:1:in call'

10.3.1.8 - - [23/Sep/2022:12:01:11 CDT] "GET /components HTTP/1.0" 500 366932

--> /components

For S&G I added a catch all to our button component just to sanity check that it wasn't something goofy with my component or the preview but we still got a failure:

If I navigate directly to a component preview (i.e. components/inspect/button/primary) It works fine and then the root (/components) will suddenly start working. However, once I restart the server the root fails again.

Other random stuff I've tried:

• Removing config.lookbook.experimental_features = [:pages] from the config (why not)
  • No change
• Removing config.lookbook.page_paths = ["spec/components/docs"] from the config (just in case)
  • No change
• Adding a page to to spec/components/docs
  • It Works!?!?
    

I have no explanation for this. I don't know why it fails without pages but works fine with them. I'm probably missing something silly but incase I'm not and this is an actual bug I wanted to open an issue. I'm happy to add any missing context or help debug further if I can.

FWIW We're planning on adding pages so this is low priority (for us at least).

[allmarkedup]

Haha @DRBragg top marks for the excellent gif usage to brighten up the bug report - I might mandate that in an issue template from now on 😂

Thanks for the through explanation/investigation - that definitely is a weird one though. I'll take a look to see if I can figure out what might be going on as soon as I get a chance.

Have a good weekend and I'll let you know as soon as I've got any ideas :-)

[DRBragg]

I thought if I couldn't write a good bug report I'd at least try to write a funny one.

Like I said def low priority!