Overriding JavaScript function throws error "Some modules could not be started" and "web is not defined"

Question

I’m trying to override some javascript functions with my custom module but it does not work and throws me an error inside browser console:

error: Some modules could not be started

Failed modules:
"custom_theme.custom_table_rows"

Debug:
"custom_theme.custom_table_rows":
error: ReferenceError: "web is not defined"

I have this js file odoo\addons\custom_theme\static\src\js\views\list\list_renderer.js which is copy-paste from the source code (with rows.length changed from 4 to 1):

odoo.define('custom_theme.custom_table_rows', function (require){
    "use strict";

    //require the module to modify:
    var ListRenderer = require(web.ListRenderer);

    //override the method:
    ListRenderer.include({
        _renderBody: function () {
            var $rows = this._renderRows();
            while ($rows.length < 1) {
                $rows.push(this._renderEmptyRow());
            }
            return $('<tbody>').append($rows);
        }
      });
  });

And I called it inside odoo\addons\custom_theme\views\header.xml:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
    <template id="assets_backend" name="Custom_header_theme" inherit_id="web.assets_backend">
        <xpath expr=".">
                <link rel="stylesheet" href="/custom_theme/static/src/scss/style.scss"/>
                <script type="text/javascript" src="/custom_theme/static/src/js/views/list/list_renderer.js"/>
                <!-- <script type="text/javascript" src="/custom_theme/static/src/js/chrome/abstract_web_client.js"/> -->
            </xpath>
    </template>
    </data>
</odoo>

Also header.xml and the web are called inside manifest:

'depends': ['base','web'],

'data': [
        # 'security/ir.model.access.csv',
        'views/views.xml',
        'views/templates.xml',
        'views/header.xml',
    ],

And it does nothing only throws an error.

When I instead modify the js file directly inside the source code (odoo/addons/web/static/src/js/views/list/list_renderer.js) it is working and changes are applied (less rows are appearing).

My module as a whole is working because it applies custom theme inside style.scss (also called inside header.xml). I only can't get the custom javascript to work (with different functions as well) while modifing the web module.

What is wrong? Why it says that web is not defined?

Answer 1

Require accept the name of the module that you want to use as a string:

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

this why you get undefined web variable, because there is no web variable and you are trying to get ListRenderer attribute from it, at least this what your browser think you are doing.