Javascript error when using lookbook in a gem

[viewcomponent]

Javascript error when using lookbook in a gem

[allmarkedup]

@nicolas-brousse I'm going to close this now as I don't think that this is a Lookbook-specific issue. Feel free to reopen with more info if required of course :-)

[mauricebolhuis]

@allmarkedup I am also experiencing a can't access property "href", this.location is undefined error on a clean Rails 7 project with the latest view_component and lookbook gems:

Uncaught TypeError: Cannot read properties of undefined (reading 'href')
    at Session.notifyApplicationAfterPageLoad (turbo.es2017-esm.js:2729:70)
    at Session.pageBecameInteractive (turbo.es2017-esm.js:2666:14)
    at PageObserver.pageIsInteractive (turbo.es2017-esm.js:2197:27)
    at PageObserver.pageIsComplete (turbo.es2017-esm.js:2201:14)
    at HTMLDocument.PageObserver.interpretReadyState (turbo.es2017-esm.js:2169:22)

It seems like this.location in this function of hotwire turbo is undefined:

notifyApplicationAfterPageLoad(timing = {}) {
     clearBusyState(document.documentElement);
     return dispatch("turbo:load", { detail: { url: this.location.href, timing } });
}

I generated a new project and added view_component + lookbook. I generated a new example view component with preview. When I start the server bin/dev and open the component in lookbook (http://localhost:3000/lookbook/example/test) I get the aforementioned error. However, when I open it in a new window (http://localhost:3000/lookbook/preview/example/test) I do not seem to get the error . Removing import "@hotwired/turbo-rails" from my app/javascript/application.js file and/or replacing it by legacy 'turbolinks' seems to prevent the error from occurring.

[mauricebolhuis]

Setting config.lookbook.preview_srcdoc = false in development.rb seems to prevent this issue from occurring.

[allmarkedup]

Ok so I've looked into this a bit more. The issue is that when using the iframe with the srcdoc attribute, within the generated document there are some caveats to do with the fact that it effectively doesn't have a standard 'location' URL associated with it. Turbo seems to not play nicely without a standard location so it's throwing some errors in the component preview.

Lookbook uses the srcdoc attribute by default because it is a bit quicker than making another request for the iframe document. But as it seems to be causing issues in a few places I think the best thing to do here is to either remove the use of srcdoc on the preview iframe altogether or to change the default to using a regular iframe src attribute pointing at the preview URL.

I think I'll do the latter for now, so people who are not using Turbo still have the option of improving the page load performance by enabling the srcdoc option. However I suspect the performance benefits are pretty marginal anyway so I may just remove this in a later version.

Thanks again everyone for your help on this issue - I'll update this thread again when I've released a new version with this change in it.

[allmarkedup]

@nicolas-brousse It's a little hard to tell what is going on there from those errors - although at first glance it doesn't appear to be to do with Lookbook. notifyApplicationAfterPageLoad is a turbolinks method, are you using that at all anywhere?

On a different note, I've not seen combustion before but that looks like exactly what I need to improve the testing on Lookbook :-) I've struggled to find a good way to run tests with different application configuration loaded and it seems like combustion will solve that. Hopefully will have some time soon to dig in a bit more!

[jalyna]

I'm experiencing the same issue.

[allmarkedup]

Thanks all for the reports, reopening this now until I have a chance to look into it further 👍

[jankeesvw]

I also see the same error, the suggestion @mauricebolhuis shared works here too.

[allmarkedup]

I've just released v0.6.0 that includes this change in the default value for the srcdoc config option so I'm going to close this again now.