polymer-webpack-loader

3.1.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader for Polymer (v3 and above) that processes HTML template elements, minifying HTML and including images, fonts, and imported stylesheets in the webpack dependency graph. Version 3.1.0 is the latest, with an active maintenance status. The loader integrates with webpack 2–4 and supports chaining with babel-loader. Differentiator: enables using Polymer 3 components within a webpack build system, handling HTML imports and template optimizations. Alternative to polymer-build or direct HTML imports, it bridges Polymer's component model with webpack's module bundling.

Common errors

error Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. ↓

cause Web component polyfills loaded out of order or missing.

fix

Load polyfills in correct sequence before main bundle (see demo/src/index.ejs).

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause polymer-webpack-loader not applied to .html files.

fix

Add the loader rule for test: /\.html$/ in webpack config.

error Error: Polymer entry point must be an HTML file. ↓

cause Entry point is a JS file instead of HTML.

fix

Set entry to an HTML file that imports components.

Warnings

deprecated Polymer 2 branch is deprecated; use version 3.x for Polymer 3. ↓

fix Upgrade to Polymer 3 and polymer-webpack-loader 3.x.

gotcha Webcomponent polyfills must be loaded in specific order to avoid 'Failed to construct HTMLElement' errors. ↓

fix Use the demo index.ejs ordering: polyfills before main bundle.

breaking Webpack 5 support not officially added; may require adjustments. ↓

fix Use webpack 4 or consider alternatives like @polymer/webpack-loader for webpack 5.

gotcha HTML-loader options passed via htmlLoader must be compatible with the installed html-loader version. ↓

fix Check html-loader documentation and ensure options are correct.

Install

npm install polymer-webpack-loader

yarn add polymer-webpack-loader

pnpm add polymer-webpack-loader

Imports

polymer-webpack-loader
wrong
```
const polymerWebpackLoader = require('polymer-webpack-loader')
```
correct
```
import polymerWebpackLoader from 'polymer-webpack-loader'
```
ESM default export available; CommonJS require also works. Typically used in webpack config, not in app code.
PolymerWebpackLoader
```
import { PolymerWebpackLoader } from 'polymer-webpack-loader'
```
Named export for the loader class; rarely needed directly.

Quickstart

Minimal webpack configuration for processing Polymer HTML components with polymer-webpack-loader.

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          { loader: 'polymer-webpack-loader' }
        ]
      }
    ]
  }
};