Polymer 3 "Uncaught ReferenceError: Polymer is not defined" - polymer

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