rollup-config-webcomponent

0.3.4 verified Mon Apr 27 auth: no javascript

Rollup configuration preset for building web components with lit-element. Version 0.3.4 provides an environment-driven config that supports TypeScript, SCSS/Sass, PostCSS, Terser minification, and Babel transpilation. It uses peer dependencies rollup 2.x and tslib 2.0.x. Key differentiators: single import for all plugins and configs, environment flags for bundle/compress/ECMAScript target, and built-in lit-element integration. Suitable for monorepos with multiple packages. Note: not extensively tested in IE11, and uses deprecated 'isAsset' check (no impact).

Common errors

error Error: Cannot find module 'rollup-config-webcomponent' ↓

cause Module not installed or not in node_modules path.

fix

Run 'npm install rollup-config-webcomponent --save-dev'

error Cannot read property 'createConfig' of undefined ↓

cause Attempting to use CommonJS require on an ESM-only package.

fix

Use ES module import syntax: 'import createConfig from 'rollup-config-webcomponent''

error Error: Could not resolve 'tslib' ↓

cause Missing peer dependency tslib.

fix

Install tslib: 'npm install tslib@2.0'

Warnings

deprecated Accessing 'isAsset' on files in the bundle is deprecated, please use 'type === "asset"' instead. This warning originates from rollup-plugin-filesize and has no functional impact. ↓

fix No action needed; warning is cosmetic. Wait for upstream fix.

gotcha When 'bundle' environment is set, TypeScript declaration generation may be disabled if you don't configure it manually. ↓

fix Ensure your tsconfig.json includes 'declaration: true' and set '--environment bundle' config accordingly.

gotcha Package requires peer dependencies rollup@2.x and tslib@2.0.x. Using incompatible versions may cause build failures. ↓

fix Install correct peer versions: 'npm install rollup@2 tslib@2.0'

gotcha The config sets Babel as the transpiler; TypeScript is only used for type-checking and declaration generation. Target default is 'esnext', but Babel may not support all JS features. ↓

fix If you need ES5 output, ensure ecma:5 is passed via environment or options.

Install

npm install rollup-config-webcomponent

yarn add rollup-config-webcomponent

pnpm add rollup-config-webcomponent

Imports

default

wrong

const createConfig = require('rollup-config-webcomponent')

correct

import createConfig from 'rollup-config-webcomponent'

Package is ESM-only; CommonJS require will fail.

createConfig

wrong

import createConfig from 'rollup-config-webcomponent'

correct

import { createConfig } from 'rollup-config-webcomponent'

Both named and default exports are the same function. Using default import is preferred.

config
```
import { config } from 'rollup-config-webcomponent'
```
Named export 'config' is a sample config object, not the factory function.

Quickstart

Shows minimal usage: import the factory function and pass options (name, input) to generate a Rollup config.

// rollup.config.js
import createConfig from 'rollup-config-webcomponent';

export default createConfig({
  name: 'my-element',
  input: './src/index.ts',
});