Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Polymer 3 Support

See original GitHub issue

Basic Support

For basic polymer 3 support - the relationship between JS and HTML will probably be reversed. Instead of HTML importing JS, the JS file will import HTML:

// processed by html-loader
// what to do with styles?
import myElementTemplate from './my-element.html';

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }
  static get template() { return myElementTemplate; }
customElements.define(, MyElement);

This relationship should not require a specialized loader and should just work with WebPack.

LitHtml in Separate File

For better static analysis and renaming support (especially with Closure-compiler), can a standard Polymer template be converted to Lit syntax by a loader?

This would continue to allow HTML authoring, but completely remove the need for projects like polymer-rename.

One of the shortcomings would be the apparent loss of the path-based change notification. This merits further investigation.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:12
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

peterchappellcommented, Jul 18, 2018

It would be great to know where this project is at regarding Polymer 3.0

There’s a good chance that people using Polymer with Webpack will end up in this repo because of this article (which was very helpful for getting us started with Polymer 2.0 - thank you).

Depending on your current thinking, it might be worth putting a statement on the Readme about how this is currently for Polymer 2.0 and if you are using Polymer 3.0 try such and such etc (I’m still looking into it but it seems like we don’t need a loader so much for Polymer 3.0).

slkennedycommented, Oct 16, 2020

Not sure what I’m missing but I installed the latest version from NPM and when I use the config from the docs the build breaks. It only works when I have the test set to .html.

"devDependencies": {
    "polymer-webpack-loader": "^2.0.3",
    module: {
        rules: [
                test: /\.js$/,
                use: 'polymer-webpack-loader'
ERROR in ./src/index.js
Module build failed (from ./node_modules/polymer-webpack-loader/dist/cjs.js):
Error: Cannot find module 'webpack/lib/RuleSet'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (C:\Ethix360\policytrac\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\Ethix360\policytrac\node_modules\polymer-webpack-loader\dist\index.js:21:16)
    at Module._compile (C:\Ethix360\policytrac\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
Read more comments on GitHub >

github_iconTop Results From Across the Web

What's new in 3.0 - Polymer Project
The Polymer CLI and associated tools have been updated to support developing, testing and deploying projects composed of ES Modules. The Polymer Starter...
Read more >
Polymer Tools Node.js Support Policy
Polymer tools must support a wide range of developers, using a variety of ... This means we will support from two to three...
Read more >
Browser support overview - Polymer Project
Polymer 3.x works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge....
Read more >
Polymer library - Polymer Project
The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to...
Read more >
ES6 and modules - Polymer Project
Polymer 3.x code is distributed as a set of ES6 modules. Not all browsers support ES6 modules and other ES6 language features, but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found