Site editor: Subtitle block error when used in WooCommerce collection query loop

  • Resolved pshemek

    (@emmek)


    7 months, 1 week ago

    Hello, could you test the block provided by the plugin in the site editor environment?
    I’m getting a notice:

    The "kia-subtitle" plugin has encountered an error and cannot be rendered.

    Particularly, it happens within WooCommerce product catalog template where I try to display products with subtitles.
    It is rendered on the front end but not in the editor.
    On the other hand, it works well in singular templates editing.

    Thank you!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author HelgaTheViking

    (@helgatheviking)

    hi, thanks for reporting. Are you seeing any error in the console? I can probably look into this sometime during the week.

    Thread Starter pshemek

    (@emmek)

    Warning: React has detected a change in the order of Hooks called by render. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Previous render Next render

------------------------------------------------------

1. useRef useRef

2. useContext useContext

3. undefined useContext

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

render@https://mysite.local/wp-content/plugins/kia-subtitle/assets/js/dist/index.js?ver=4.0.0:1:274

PluginErrorBoundary@https://mysite.local/wp-includes/js/dist/plugins.js?ver=0dd2604d62f853fd21af:290:5

div

PluginArea@https://mysite.local/wp-includes/js/dist/plugins.js?ver=0dd2604d62f853fd21af:594:20

RouterProvider@https://mysite.local/wp-includes/js/dist/router.js?ver=24ab4c66bbafbf045980:911:24

GlobalStylesProvider@https://mysite.local/wp-includes/js/dist/edit-site.js?ver=7687c91667ed9257416e:12191:30

SlotFillProvider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34760:26

provider_SlotFillProvider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34857:35

Provider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34916:18

App@https://mysite.local/wp-includes/js/dist/edit-site.js?ver=7687c91667ed9257416e:45432:55

Uncaught Error: Rendered more hooks than during the previous render.

updateWorkInProgressHook...

Uncaught Error: Rendered more hooks than during the previous render.

updateWorkInProgressHook...

The above error occurred in the <render> component:

render@https://mysite.local/wp-content/plugins/kia-subtitle/assets/js/dist/index.js?ver=4.0.0:1:274

PluginErrorBoundary@https://mysite.local/wp-includes/js/dist/plugins.js?ver=0dd2604d62f853fd21af:290:5

div

PluginArea@https://mysite.local/wp-includes/js/dist/plugins.js?ver=0dd2604d62f853fd21af:594:20

RouterProvider@https://mysite.local/wp-includes/js/dist/router.js?ver=24ab4c66bbafbf045980:911:24

GlobalStylesProvider@https://mysite.local/wp-includes/js/dist/edit-site.js?ver=7687c91667ed9257416e:12191:30

SlotFillProvider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34760:26

provider_SlotFillProvider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34857:35

Provider@https://mysite.local/wp-includes/js/dist/components.js?ver=fd3882637f2f48054bd3:34916:18

App@https://mysite.local/wp-includes/js/dist/edit-site.js?ver=7687c91667ed9257416e:45432:55

React will try to recreate this component tree from scratch using the error boundary you provided, PluginErrorBoundary.
    Plugin Author HelgaTheViking

    (@helgatheviking)

    Well I thought I had this fixed today, as I got it working in the woo product archive template… and then i went to look at the single post template and I’m getting the same error about rendering too many hooks/different number of hooks. So I am stumped and will need a bit more time unfortunately.

    Plugin Author HelgaTheViking

    (@helgatheviking)

    @emmek could you try this pre-release?

    Thread Starter pshemek

    (@emmek)

    The product catalog displays “No subtitle” placeholder at products and the same notice as before at the top.
    I’m not sure but the console error may be different.

    Uncaught TypeError: i is undefined...

    It is present even if the block is not inserted into the template, so is triggered at earlier stage.

    Plugin Author HelgaTheViking

    (@helgatheviking)

    crap, I thought I had that because I’m not seeing it locally anymore… Or wasn’t. Thanks for checking.

    Plugin Author HelgaTheViking

    (@helgatheviking)

    Here’s another attempt if you don’t mind testing.

    Thread Starter pshemek

    (@emmek)

    The error has gone, however, the post (product) template block shows just a “No subtitle” placeholder. It would be great if it could grab the actual subtitle from the post (product) meta.

    screenshot

    Plugin Author HelgaTheViking

    (@helgatheviking)

    well it is supposed to show the actual title. ?? I thought it did in the regular post archive…

    Thread Starter pshemek

    (@emmek)

    Maybe WooCommerce template creates a somehow different context, I don’t know…

    Plugin Author HelgaTheViking

    (@helgatheviking)

    Fourth time is the charm? Thanks for your patience… developing for the block editor is 100x harder than the old way.

    No errors and I see the subtitle for posts/products that have it
    https://share.zight.com/RBuAN52K

    Thread Starter pshemek

    (@emmek)

    Good, the subtitle is visible in the catalog. So we can consider it like almost fixed for the end user.

    However, the editor console still shows an error in the plugin which is compiled to “Uncaught TypeError: a is undefined”, so not much info from this on production. It is triggered early, because it is present in the whole site editor.

    On some templates it manifests itself through an error notice “The “kia-subtitle” plugin has encountered an error and cannot be rendered.” and on some it does not.

    Plugin Author HelgaTheViking

    (@helgatheviking)

    I really hate the built/compiled scripts for being entirely unreadable by humans.

    What template are you editing where you see this error? I have looked at the woo category template, single page, index, cart page and don’t see any issues.

    Not to sound too pedantic, but could you remove the blocks and add it back and see if that helps?

    If you are game, could you make a staging site? You can use wp staging. You can get in touch with me via my website to share temporary creds eventually. Please take any relevant steps to anonymize data.

    Thread Starter pshemek

    (@emmek)

    Your suggestion hit the spot.
    On the last iteration I did not replace the block inside the template. Once I did, the error disappeared.

    Thank you for your effort on making the plugin better!
    It is not obvious on these forums.

    Plugin Author HelgaTheViking

    (@helgatheviking)

    Great!! Ok, I will tag that and release it then since I think we finally found fixed things.

    You’re welcome and thanks to you as well for reporting and helping me to test this.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Site editor: Subtitle block error when used in WooCommerce collection query loop’ is closed to new replies.