Cannot read properties of null (reading 'classList') in plugins.bundle.js
Hi Guys,
I've encountered an issue with the Blazor starter kit (v 8.20). I am working with the e-commerce app. when I'm loading any page that loads the "js/custom/apps/ecommerce/catalog/save-category.js" file (Products.razor) for example, I'm facing an issue with the /plugins.bundle.js file. i would appreciate your help :)
details Error message:
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: Cannot read properties of null (reading 'classList')
TypeError: Cannot read properties of null (reading 'classList')
at http://localhost:5070/assets/plugins/global/plugins.bundle.js:26258:14648
at Array.forEach (
the code I am using for the Product page:
@page "/ecommerce/catalog/products"
Product SKU Qty Price Rating Status Actions 03168001 Sold out 0 13 Actions 02131003 43 12 Actions 04224007 24 28 Actions 04903007 Low stock 4 263 Actions 04757001 Low stock 9 160 Actions 01800009 Low stock 5 19 Actions 03245007 29 275 Actions 04160003 Sold out 0 263 Actions 02490004 19 171 Actions 01350009 Low stock 7 99 Actions 01661004 13 299 Actions 02190008 19 287 Actions 02139009 24 161 Actions 04708003 23 62 Actions 01872009 Low stock 2 250 Actions 04142009 14 266 Actions 01349005 41 240 Actions 01350005 11 241 Actions 02341004 18 231 Actions 02494003 22 280 Actions 03436005 16 221 Actions 01409004 32 270 Actions 02760005 41 170 Actions 02589001 44 128 Actions 04337003 15 268 Actions 01170009 Low stock 2 198 Actions 03627005 38 14 Actions 01313003 20 277 Actions 04694007 Low stock 5 179 Actions 03870006 Low stock 1 68 Actions 01270008 16 290 Actions 03530005 21 57 Actions 03797007 Low stock 1 264 Actions 01205006 36 146 Actions 02345002 12 219 Actions 04446009 31 238 Actions 03861004 26 139 Actions 04651004 27 257 Actions 02284002 46 288 Actions 03245003 45 287 Actions 04720002 Low stock 2 280 Actions 02442001 Low stock 6 161 Actions 02846001 41 101 Actions 02732005 26 96 Actions 04553006 Low stock 3 295 Actions 01758004 Low stock 7 121 Actions 04654008 41 64 Actions 03347009 49 297 Actions 04661003 22 63 Actions 02821002 43 87 Actions @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // Add a small delay to ensure the JavaScript file is fully loaded await Task.Delay(500); await JS.InvokeVoidAsync("KTAppEcommerceCategories.init"); await JS.InvokeVoidAsync("KTAppEcommerceSaveCategory.init"); await JS.InvokeVoidAsync("KTAppEcommerceProducts.init"); await JS.InvokeVoidAsync("KTAppEcommerceSaveProduct.init"); } } }
Replies (1)
Hi,
For the apps/ecommerce/catalog/products page, you do not need to include and initialize all of the eCommerce components.
Check the example in this gist.
You will need to load and initialize KTAppEcommerceCategories, KTAppEcommerceSaveCategory, and KTAppEcommerceSaveProduct on other eCommerce pages.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
