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

[chicken-suop]

Description

I have a very simple component that uses UpdatingElement. The goal is to use the component in a legacy application. After having some initial difficulties regarding babel transforms, we've gotten to this point:

My component

It works fine on a test environment, but once I import the component into the legacy app, I get the error.

import { UpdatingElement } from 'lit-element/lib/updating-element';
import { html } from 'lit-element'

export default class BackboneElement extends UpdatingElement {
  render() {
    return html`<div>foo</div>`
  }
}

Browserify

If you don't know browserify, don't worry about it. The only the thing to note is we're using babel to convert the lit-element and lit-html modules into better supported code.

browserify({
  debug   : true,
  entries : entities
})
.transform(hbsfy)
.transform(babelify, {
  only: [
    /components\/tool-panel\/node_modules\/(?:lit-element|lit-html)/,
    /components\/tool-panel/
  ],
  global: true,
  presets: [
    ['@babel/preset-env', {
      'targets': {
        esmodules: true,
      },
      'bugfixes': true
    }]
  ],
  plugins: ['@babel/plugin-transform-modules-commonjs']
})

The error

Uncaught (in promise) TypeError: Cannot read property '2' of null
    at new Template (template.ts:93)
    at Object.templateFactory (shady-render.ts:81)
    at NodePart.__commitTemplateResult (parts.ts:288)
    at NodePart.commit (parts.ts:241)
    at render (render.ts:51)
    at Function.render (shady-render.ts:276)
    at HTMLElement.update (lit-element.ts:298)
    at HTMLElement.performUpdate (updating-element.ts:774)
    at HTMLElement._enqueueUpdate (updating-element.ts:724)

lit-html/src/lib/template.ts:93

const name = lastAttributeNameRegex.exec(stringForPart)![2];

Acceptance criteria

I must no longer get the error when using babel

[kevinpschaaf]

I think we'll need a better repro in order to diagnose the issue. It is unexpected that a build transform could result in the failure on the line you're seeing.

Is it possible to put a minimal repro in a github repo that we can download and build? Thanks.

[andrewlevada]

Hi. I get the same error, but on different lines:

Uncaught (in promise) TypeError: Cannot read property '2' of null
    at new Template (template.js:89)
    at Object.eval [as templateFactory] (shady-render.js:83)
    at NodePart.__commitTemplateResult (parts.js:274)
    at NodePart.commit (parts.js:227)
    at render (render.js:49)
    at Function.render (shady-render.js:265)
    at HTMLElement.update (lit-element.js:252)
    at HTMLElement.performUpdate (updating-element.js:560)
    at HTMLElement._enqueueUpdate (updating-element.js:513)

I've created a minimal repository in which error occurs: https://github.com/AndrewLevada/LitElementIssue1115 To reproduce run npm script "start:dev" and open http://localhost:2797/ Hope it helps)

[andrewlevada]

Hello. Turns out that it's my mistake. Actually, two mistakes: I was adding html attributes (not tags) in conditional operators as normal strings:

<input id="${this.alias}-input" class="mdc-text-field__input" 
                   type="${this.type}" 
                   aria-labelledby="${this.alias}-input-label" 
                   ${this.minLength ? `minlength="${this.minLength}"` : ``} 
                   ${this.maxLength ? `maxlength="${this.maxLength}"` : ``}>

However, I don't think that the original issue is related to mine, despite the fact that exception occurs in almost the same lines of code as mine.

[kevinpschaaf]

Closing due to age. Please reopen with a clear repro if your issue persists.