External javascript is unaware of imports: resulting in lint warning - unable to resolve superclass Polymer.Element

[bahrus]

On windows, version 0.4.3 of the Polymer IDE gives error

file: 'file:///c%3A/git/xtal/src/xtal-fetch.js' severity: 'Error' message: 'Unable to resolve superclass Polymer.Element' at: '5,33' source: 'polymer-ide'

In this file: https://github.com/bahrus/xtal/blob/master/src/xtal-fetch.js#L5

That file is referenced from here: https://github.com/bahrus/xtal/blob/master/src/xtal-fetch.html#L1

When I do a Ctrl+Click on the reference to Polymer 2, I see something flash very quickly: "No definition found for..." before it is able to successfully open the polymer-element.html file. Not sure if that's a genuine clue or a red herring.

[rictic]

Hm, this is a serious issue at the analyzer level. Filed as https://github.com/Polymer/polymer-analyzer/issues/582

[rictic]

(the ctrl+click issue is a red herring I think: I'm pretty sure that the polymer ide and typescript services are racing, and polymer says it's not found but typescript can find it)

[abdonrd]

@rictic: I'm doing some tests like this:

polymer-section.html:

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<script>
  (function() {
    'use strict';

    class Section extends Polymer.Element {
      //
    }

    Polymer.Section = Section;
  })();
</script>

But when I used the Polymer.Section:

The code works, but the Polymer Linter says:

[polymer-ide] Unable to resolve superclass Polymer.Section

Any idea?

[rictic]

@abdonrd Add a comment saying @namespace Polymer to your Section class.

[abdonrd]

@rictic It doesn't work. The same error. 😕

[abdonrd]

@rictic seeing the official polymer-element.html... My example works with @polymerElement and @memberof Polymer:

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<script>
  (function() {
    'use strict';

    /**
     * @polymerElement
     * @memberof Polymer
     */
    class Section extends Polymer.Element {
      //
    }

    Polymer.Section = Section;
  })();
</script>

It is right?

[rictic]

Oh, erp, yes that's right! @memberOf not @namespace 🙃

[abdonrd]

@rictic thanks! 😄

[fwielstra]

I'm still running into this issue; polymer lint is green, but the editor plugin is indicating it can't resolve the superclass, even with @memberOf, @namespace or @polymerElement (which, as an aside, should not be required to make a linter happy).

Can I just import Polymer.Element from somewhere instead?

[rickymarcon]

I had to use

/**
* @polymer
* @extends HTMLElement
*/

[ShaggyDude]

I guess forcing a little documentation is not a bad thing.

[yebrahim]

@rickymarcon can you explain how to use this? Where should I put it?

[yebrahim]

Never mind, worked when put before the element's class declaration. However, I'm using Typescript with Polymer, and seeing a similar error with a few other classes randomly. For example, for one class that extends Error, I see this: warning [unknown-superclass] - Unable to resolve superclass Error.

[drwaky]

I had the same problem here, the @abdonrd and @rictic solution do not work for me, but the @rickymarcon one do.

/**
* @polymer
* @extends HTMLElement
*/

[davie-robertson]

@drwaky this seems to also work for LitElement (VSCode lint errors in the new PWA samples)

[goldingdamien]

Is this issue for Polymer 2? I am using Polymer 3 and am getting a similar issue. The following results in the same error but with name "PolymerElement" instead.

import {
  PolymerElement
} from '@polymer/polymer/polymer-element.js'
class myClass extends PolymerElement {}