Uncaught (in promise) TypeError: Cannot read property '2' of null

Hi All,

Just dipping my toes into mobile app development for the first time. Liking Framework7 so far, and it has been going well, but i’ve done something that is causing me some problems.

I have a page, with a link that opens a new page called register. it has been working (I’ve done something to break it, but I dont know what).

Any help would be appreciated.

The error is “Uncaught (in promise) TypeError: Cannot read property ‘2’ of null” in www/framework7/js/framework7.js:10637

function parseComponent(componentString) {
var id = Utils.id();
var callbackCreateName = “f7_component_create_callback_” + id;
var callbackRenderName = “f7_component_render_callback_” + id;

// Template
var template;
var hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/);
var templateType = hasTemplate[2] || 't7';
if (hasTemplate) {
  template = componentString
    .split(/<template[ ]?[a-z0-9-]*>/)
    .filter(function (item, index) { return index > 0; })
    .join('<template>')
    .split('</template>')
    .filter(function (item, index, arr) { return index < arr.length - 1; })
    .join('</template>')
    .replace(/{{#raw}}([ \n]*)<template/g, '{{#raw}}<template')
    .replace(/\/template>([ \n]*){{\/raw}}/g, '/template>{{/raw}}')
    .replace(/([ \n])<template/g, '$1{{#raw}}<template')
    .replace(/\/template>([ \n])/g, '/template>{{/raw}}$1');
}

specifically, “var hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/);”

it appears that componentString is the page content of my register page. The word Template does not appear in there anywhere, and i dont think it ever has.

Many thanks for any advice / help!

Scott

1 Like

how are you calling:

function parseComponent(componentString) {...}

the value return there is undefined or null? what are you trying to do? can you share your full code?

Sorry, thats in framework7.js, im not calling it deliberately, its getting called somewhere, but i dont know where.

app.js

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Framework7’, // App name
theme: ‘auto’, // Automatic theme detection
// App root data
data: function () {
return {
user: {
firstName: ‘John’,
lastName: ‘Doe’,
},
};
},
// App routes
routes: routes,
});

// Init/Create main view
var mainView = app.views.create(’.view-main’, {
url: ‘/’
});

routes.js

routes = [
{
name: ‘main’,
path: ‘/’,
url: ‘./index.html’,
},
{
name: ‘register’,
path: ‘/register/’,
componentUrl: ‘./pages/register.html’,
},
// Default route (404 page). MUST BE THE LAST
{
path: ‘(.*)’,
url: ‘./pages/404.html’,
},
];

index.html

<!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
  <!-- Page, data-name contains page name which can be used in callbacks -->
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title sliding">Speed Distance Time Pro</div>
      </div>
    </div>
  
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="page-content login-screen-content">
        <div class="login-screen-title">Login</div>
        <div class="list">
          <ul>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Username</div>
                <div class="item-input-wrap">
                  <input type="text" name="username" placeholder="Your username">
                </div>
              </div>
            </li>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input-wrap">
                  <input type="password" name="password" placeholder="Your password">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link list-button login-button">Sign In</a>
            </li>
          </ul>
          <ul>
            <li>
              <a href="/register/" class="item-link list-button">Register</a>
            </li>
          </ul>
          <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
        </div>
      </div>
    </div>
  </div>
</div>

register.html

<div class="page" data-name="form">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Register</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Your details</div>
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name"/>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="E-mail"/>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Password"/>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Confirm Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Confirm Password"/>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Phone</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="Phone"/>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Gender</div>
              <div class="item-input-wrap">
                <select>
                  <option>Male</option>
                  <option>Female</option>
                </select>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Birth date</div>
              <div class="item-input-wrap">
                <input type="date" placeholder="Birth day" value="2014-04-30"/>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <a href="#" class="col button">Register</a>
  </div>
</div>
<script>
  return {
    data: function () {
      return {
        title: 'Component Page',
        names: ['John', 'Vladimir', 'Timo'],
      }
    },
    methods: {
      registerUser: function (email, password) {
        var self = this;
        this.$app.dialog.alert("registering");
      },
    }
  }

</script>

ok, you are missing the tag template in register.html
so:

<template>
  <!-- here your HTML-->
  <div class="page" data-name="form">
    ...
  </div>
</template>
2 Likes

Brilliant! I dont remember removing them, but that has fixed my issue. Thank you so much!