Hello all,

I've been struggling with making a js file for a bit now. It's my first time working with js and I have no clue what I'm doing. I keep getting the error of  Uncaught Error: Dependencies should be defined by an array:

Or the error that I'm missing or not using the right dependencies:  The following modules are needed by other modules but have not been defined, they may not be present in the correct asset bundle:web.core, web.rpc, web.Widget.

This is my code, please help!

odoo.define('diana.product_tabs', ['web.core', 'web.rpc', 'web.Widget'], function (require) {

    "use strict";

    var core = require('web.core');

    var rpc = require('web.rpc');

    var Widget = require('web.Widget');

    var ProductTabs = Widget.extend({

        template: 'ProductTabsTemplate', 

        start: function () {

            return this._super.apply(this, arguments).then(() => {

                this._setupProductCategoryTabs();

            });

        },

        _getProductIds: function () {

            return this.product_ids ? this.product_ids.res_ids : [];

        },

        _setupProductCategoryTabs: function () {

            var self = this;

            var products = this._getProductIds();

            if (products.length === 0) {

                console.log("No products selected.");

                return;

            }

            rpc.query({

                model: 'product.template',

                method: 'read',

                args: [products, ['name', 'default_code', 'list_price', 'qty_available', 'categ_id']],

            }).then(function (productRecords) {

                console.log("Product Records: ", productRecords);

                self._renderProductTabs(productRecords);

            });

        },

        _renderProductTabs: function (productRecords) {

            var categories = {};

            productRecords.forEach(function (product) {

                var categoryId = product.categ_id[0];

                if (!categories[categoryId]) {

                    categories[categoryId] = {

                        id: categoryId,

                        name: product.categ_id[1],

                        products: []

                    };

                }

                categories[categoryId].products.push(product);

            });

            var $tabsContainer = this.$('.o_product_category_tabs');

            $tabsContainer.empty(); 

            Object.values(categories).forEach(category => {

                var tabHeader = $('<div/>', {

                    class: 'tab-header',

                    text: category.name,

                    style: 'cursor: pointer; font-weight: bold; margin-top: 10px;'

                });

                var tabContent = $('<div/>', {

                    class: 'tab-content',

                    style: 'display:none; margin-left: 15px;'

                });

                category.products.forEach(product => {

                    var productLine = $('<div/>', {

                        class: 'product-line',

                        style: 'margin-bottom: 5px;'

                    }).append(

                        $('<span/>', { text: product.name, style: 'margin-right: 10px;' }),

                        $('<span/>', { text: product.default_code, style: 'margin-right: 10px; color: gray;' }),

                        $('<span/>', { text: 'Price: ' + product.list_price.toFixed(2) + ' €', style: 'margin-right: 10px;' }),

                        $('<span/>', { text: 'Stock: ' + product.qty_available })

                    );

                    tabContent.append(productLine);

                });

                $tabsContainer.append(tabHeader).append(tabContent);

            });

            $tabsContainer.on('click', '.tab-header', function () {

                $(this).next('.tab-content').slideToggle();

            });

        }

    });

    core.action_registry.add('diana.product_tabs', ProductTabs);

});