Polymer 3 "Uncaught ReferenceError: Polymer is not defined"

Question

I am new to polymer and I have the following problem after running "polymer build" and when I run "polymer serve build / esm-bundled" the following error occurs in the browser:

Uncaught ReferenceError: Polymer is not defined

I noticed that if I disable the polymer.json's bundle the error does not appear.

Can someone help me please?

I'm using Polymer-3 and Redux, this project was built initially with the polymer-2, but I did the conversion and it works fine when I run before the build.

This is polymer.json

{ 
  "entrypoint": "index.html",
  "shell": "src/components/conversion-today-app/conversion-today-app.js",
  "sources": [
    "src/**/*",
    "images/**/*",
    "robots.txt",
    "sitemap.xml",
    "coinzilla-354635a9db1dbd05d0.txt" 
  ], 
  "extraDependencies": [
    "manifest.json",
    "node_modules/web-animations-js/**",
    "node_modules/@webcomponents/webcomponentsjs/**",
    "node_modules/@polymer/polymer/**"

  ],
  "builds": [
    {
      "name": "esm-bundled",
      "browserCapabilities": [
        "es2015",
        "modules"
      ],
      "js": {
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "bundle": true,
      "addServiceWorker": true
    }
  ]
}

Part of the component where the error is

// Principais // Bibliotecas
import { PolymerElement,html } from '@polymer/polymer/polymer-element.js';
// import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { connect } from 'pwa-helpers/connect-mixin.js';


// pwa helper
import { installOfflineWatcher } from 'pwa-helpers/network.js';

// ---------- Redux ----------

// This element is connected to the redux store.
import { store } from '../../store.js';

// These are the actions needed by this element.
import { addCoin } from '../../actions/converter.js';
import converter from '../../reducers/converter.js';

import { fetchCrypto } from '../../actions/cryptoCoins.js';
import { fetchCurrencyState } from '../../actions/stateCoins.js';

// We are lazy loading its reducer.
import cryptoCoins from '../../reducers/cryptoCoins.js';
import stateCoins from '../../reducers/stateCoins.js';

store.addReducers({
   stateCoins, cryptoCoins
});



// Componentes de Terceiros
import '@polymer/paper-fab/paper-fab.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu-light.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-localstorage/app-localstorage-document.js';

// Components locais
import '../elements/collection-coin-element.js';



class ConversionTodayConverter extends connect(store)(PolymerElement) {
    static get template() {
        return html`
        <style include="demo-pages-shared-styles">
            :host {
                display: block;
                padding: 10px;
            }

            paper-fab {
                --paper-fab-background: #2B4461;
                display: inline-block;
                /* margin: 8px; */
                position: fixed;
                right: 25px;
                bottom: 30px;
            }
        </style>


        <app-localstorage-document key="conversion-today-coins" data="{{coins}}">
        </app-localstorage-document>

Browser -- error

This is what appears in the browser

Answer 1

First of all: You should add some code examples of your elements, since it it's not easy to solve your problem without any further informations 😉

When I upgraded my projects to polymer 3.x I always got that console error when I forgot to replace usages of the legacy Polymer class. For example: In Polymer-2 an element was defined by class XCustom extends Polymer.Element {...} but in polymer-3 it is class XCustom extends PolymerElement {...}. If you forget to change that in any element (your own and the imported ones), your console with throw the Polymer is not defined-error.

So I guess in your Webapp/Element there are still references to the legacy Polymer-class. In my case it was mostly on of these usages: Polymer.Element, Polymer.importHref(...) or Polymer.mixinBehaviors(...). You should simple search your project files for the usage of "Polymer." and replace all occurrences with the equivalent polymer-3-functions.

Here are some of the most common upgrade replacements in polymer-3:

Polymer.Element

Create an element as follows:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MyElement extends PolymerElement {...}

Also have a look at the Polymer docs

Polymer.mixinBehaviors(...)

Use behavior mixins as follows:

import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
class MyElement extends mixinBehaviors([IronResizableBehavior],PolymerElement)  {...}

Polymer.importHref(...)

Import elements as follows:

import('./my-page.js').then(
   function(){
      console.info("Success");
   }.bind(this), 
   function(){
      console.info("Fail");
   }.bind(this)
);

Also have a look at the Polymer docs