This question has been flagged
2 Replies
788 Views
#upgrade#OWL#odoo17#widget#odoo16
Avatar
Anthony Taylor

Getting an error while trying to update a custom module of mine.  I get this error when trying to edit any page which uses a dynamic widget I'm making.

UncaughtPromiseError > OwlError
Uncaught Promise > An error occured in the owl lifecycle (see this Error's "cause" property)
....
Caused by: TypeError: Cannot read properties of undefined (reading 'forEach')

Here is the contents of the main.js from which I think the error stems from?  I'm unsure because there is no 'forEach' in my code.

/** @odoo-module **/

import publicWidget from "@web/legacy/js/public/public_widget";

publicWidget.registry.BannerManager = publicWidget.Widget.extend({
    selector: '.banner-manager',
    init: function () {
        this.rpc = this.bindService("rpc");
    },
    start: function () {
        let bannerRow = this.el.querySelector('#banner-manager-row');

        if (bannerRow){
                let html = ``;
                let count = 0;

                this._fetchData().then(banners => {
                    while(count                       html += `

                                
                        
`;
                      } else {
                        html += `">
                                
                        `;
                      }
                      count++;
                    }
                    bannerRow.innerHTML = html;
                  });
        }
    },
    async _fetchData() {
        const bannerData = await this.rpc('/get_banners',{});
        return(bannerData);
    },
});

export default publicWidget.registry.BannerManager;

Any help debugging would be appreciated.


Avatar
Discard
Avatar
Anthony Taylor
Author Best Answer

I'm not sure exactly why, but after merging your code with mine it suddenly started working perfectly.

Thank you.

Avatar
Discard
Avatar
OdooNomad
Best Answer

The error Cannot read properties of undefined (reading 'forEach') suggests that somewhere in your code, you are trying to call forEach on an undefined value. However, you mentioned that there is no forEach in your code, which indicates the issue might be coming from the data structure or response you are handling.

Let's go through the code to identify potential issues and ensure everything is correctly handled.

  1. Initialization of this.rpc: Make sure this.rpc is properly initialized.
  2. Handling the response from _fetchData: Ensure the data returned by _fetchData is what you expect it to be.
  3. Error Handling: Add error handling to catch any issues when fetching or processing data.

Here is the revised version of your code with added error handling and some corrections:

 
/** @odoo-module **/

import publicWidget from "@web/legacy/js/public/public_widget";

publicWidget.registry.BannerManager = publicWidget.Widget.extend({
    selector: '.banner-manager',
    init: function () {
        this._super(...arguments);
        this.rpc = this.bindService("rpc");
    },
    start: async function () {
        let bannerRow = this.el.querySelector('#banner-manager-row');

        if (bannerRow) {
            let html = '';
            let count = 0;

            try {
                const banners = await this._fetchData();
                banners.forEach(banner => {
                    if (count % 2 === 0) {
                        html += `
                                    
                                 
`;
                    } else {
                        html += `
                                    
                                 
`;
                    }
                    count++;
                });
                bannerRow.innerHTML = html;
            } catch (error) {
                console.error('Error fetching banners:', error);
            }
        }
    },
    async _fetchData() {
        try {
            const bannerData = await this.rpc('/get_banners', {});
            if (!Array.isArray(bannerData)) {
                throw new Error('Invalid banner data format');
            }
            return bannerData;
        } catch (error) {
            console.error('Error in _fetchData:', error);
            throw error;
        }
    },
});

export default publicWidget.registry.BannerManager;


Avatar
Discard