Failing import in Polymer 2.x: ("The element ... is not defined")

Question

I want to import an element and bind one of its properties. My import fails silently. I expect the value of userLocal to be an object. But, instead, userLocal is undefined.

my-app.html

<link rel="import" href="/src/app-state/state-user-local.html">
...
<state-user-local user-local="{{userLocal}}"></state-user-local>
...
<script>
  /* @polymerElement */
  class MyApp extends Polymer.Element {
    static get is() { return 'my-app; }
    static get properties() { return {
      userLocal: {
        type: Object,
        notify: true,
      },
      ...
    }}
  }
  window.customElements.define(MyApp.is, MyApp);
</script>

with the following error message.

The element state-user-local is not defined

I know the import definition is correct because I am using VSCode and when I command+click the import it takes me to the correct file.

I know there is no problem with the <state-user-local> element itself because I successfully import it into other element/s in the app and obtain the expected value of userLocal there.

This problem sounds like what is described at the following links.

• The element xxx is not defined (issue #54)
• Recognize elements registered with MyElem.is (issue #540)

The first link discusses using "/* @polymerElement */ above the class" which is what I have tried (see above code) without success.

Answer 1

It seems to me that you didn't define the <state-user-local> element inside your file; you defined <my-app>. If you want to use the tag name <state-user-local> you need to define it as such.

<script>
      class StateUserLocal extends Polymer.Element {
        static get is() { return 'state-user-local'; }
        static get properties() { return {
          userLocal: {
            type: Object,
            notify: true,
          },
          ...
        }}
      }
      window.customElements.define(StateUserLocal.is, StateUserLocal);
</script>