{"id":20274,"library":"polymer-webpack-loader","title":"polymer-webpack-loader","description":"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.","status":"maintenance","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/polymer-webpack-loader","tags":["javascript"],"install":[{"cmd":"npm install polymer-webpack-loader","lang":"bash","label":"npm"},{"cmd":"yarn add polymer-webpack-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add polymer-webpack-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for webpack loader integration","package":"webpack","optional":false}],"imports":[{"note":"ESM default export available; CommonJS require also works. Typically used in webpack config, not in app code.","wrong":"const polymerWebpackLoader = require('polymer-webpack-loader')","symbol":"polymer-webpack-loader","correct":"import polymerWebpackLoader from 'polymer-webpack-loader'"},{"note":"Named export for the loader class; rarely needed directly.","wrong":"","symbol":"PolymerWebpackLoader","correct":"import { PolymerWebpackLoader } from 'polymer-webpack-loader'"}],"quickstart":{"code":"// webpack.config.js\nconst webpack = require('webpack');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/dist'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        use: [\n          { loader: 'polymer-webpack-loader' }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Minimal webpack configuration for processing Polymer HTML components with polymer-webpack-loader."},"warnings":[{"fix":"Upgrade to Polymer 3 and polymer-webpack-loader 3.x.","message":"Polymer 2 branch is deprecated; use version 3.x for Polymer 3.","severity":"deprecated","affected_versions":">=1.0 <3.0"},{"fix":"Use the demo index.ejs ordering: polyfills before main bundle.","message":"Webcomponent polyfills must be loaded in specific order to avoid 'Failed to construct HTMLElement' errors.","severity":"gotcha","affected_versions":">=3.0"},{"fix":"Use webpack 4 or consider alternatives like @polymer/webpack-loader for webpack 5.","message":"Webpack 5 support not officially added; may require adjustments.","severity":"breaking","affected_versions":">=3.0"},{"fix":"Check html-loader documentation and ensure options are correct.","message":"HTML-loader options passed via htmlLoader must be compatible with the installed html-loader version.","severity":"gotcha","affected_versions":">=3.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Load polyfills in correct sequence before main bundle (see demo/src/index.ejs).","cause":"Web component polyfills loaded out of order or missing.","error":"Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function."},{"fix":"Add the loader rule for test: /\\.html$/ in webpack config.","cause":"polymer-webpack-loader not applied to .html files.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Set entry to an HTML file that imports components.","cause":"Entry point is a JS file instead of HTML.","error":"Error: Polymer entry point must be an HTML file."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}