I have created a button in POS product screen, to display a new screen. 

The js file for the button is : 

odoo.define('cdc_pos.ProductTotalSalesButton', function (require) {
    'use strict';
    const PosComponent=require('point_of_sale.PosComponent');
    const ProductScreen=require('point_of_sale.ProductScreen');
    const { useListener } =require("@web/core/utils/hooks");
    const Registries=require('point_of_sale.Registries');
    class ProductTotalSalesButton extends PosComponent {
    	​	​setup() {
          	​	​super.setup();
          		​​useListener('click', this.onClick);
        	​}
		​​async onClick() {
                this.showScreen('ProductTotalSalesScreen')
        	​}                  
    }
    ProductTotalSalesButton.template='ProductTotalSalesButton';
    ProductScreen.addControlButton({
       component:ProductTotalSalesButton,
       condition:function() {
           returntrue;       },
    });
    Registries.Component.add(ProductTotalSalesButton);
    return ProductTotalSalesButton;
});

The button is added correctly and it is used to show a new screen called ProductTotalSalesScreen using the showScreen function.

The js and xml files for the new screen are:

odoo.define('cdc_pos.ProductTotalSalesScreen', function(require) {
    'use strict';
    const PosComponent=require('point_of_sale.PosComponent');
    const Registries=require('point_of_sale.Registries');
    class ProductTotalSalesScreen extends PosComponent {
        setup(){
            super.setup();
        }
        back() {
            this.showScreen('ProductScreen');
        }
    };
    ProductTotalSalesScreen.template='ProductTotalSalesScreen';
    Registries.Component.add(ProductTotalSalesScreen);
    return ProductTotalSalesScreen;
});


xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="ProductTotalSalesScreen" owl="1">
        <div class="top-content">
            <div class="button back" t-on-click="back">
                Back
            div>
        div>
        <t t-foreach="[1, 2, 3]" t-as="i">
            <p><t t-out="i"/>p>
        t>
    t>
templates>
​

When I click the show ProductTotalSalesScreen, there is an error in the browser console which just says "undefined"

If I comment out the t-foreach loop then the screen is displayed.

Is there any reason why the t-foreach loop part causes the undefined error?
I can't make t-foreach work for this new screen template...