unplugin-stencil

0.4.1 verified Mon Apr 27 auth: no javascript

An unplugin wrapper around the Stencil compiler for use with Vite, Webpack, Rollup, esbuild, Nuxt, and other build tools. Version 0.4.1 is the current stable release. It provides a unified plugin interface across multiple bundlers, enabling Stencil component compilation in non-Stencil projects. Key differentiators: supports source maps (since 0.4.0), serializes builds to prevent stale output, and works with Astro, rspack, and Vue CLI. Peer dependencies include @stencil/core ^4.29.3 and various build tool versions. Release cadence is irregular; latest fixes address process.exit in writeBundle and Windows path support.

Common errors

error Error: Cannot find module 'unplugin-stencil/vite' ↓

cause Incorrect import path; subpath '/vite' missing.

fix

Ensure you have installed the package: npm install unplugin-stencil and use import stencil from 'unplugin-stencil/vite'.

error TypeError: stencil is not a function ↓

cause Importing default export without calling it as a function.

fix

Use stencil({ options }) as a function call in your plugins array.

error Error: process.exit is not a function in writeBundle hook (v0.4.0) ↓

cause Bug in version 0.4.0 where process.exit was called incorrectly.

fix

Upgrade to 0.4.1 which fixes this issue.

Warnings

breaking In version 0.3.0, `ensureFreshBuild` was renamed to `getLatestBuild` and the build system switched to event-driven queue. ↓

fix Update any custom build logic to use `getLatestBuild` and adjust for event-driven queue pattern.

deprecated Nuxt 2 support is deprecated and may be removed in future versions. ↓

fix Migrate to Nuxt 3 if possible.

gotcha On Windows, path transformations may fail before version 0.3.4. Ensure you use >=0.3.4 for Windows support. ↓

fix Upgrade to version 0.3.4 or later.

breaking In version 0.2.9, the ESM import issue with @stencil/core was fixed. Users on <0.2.9 may encounter ESM import errors. ↓

fix Upgrade to 0.2.9 or later.

Install

npm install unplugin-stencil

yarn add unplugin-stencil

pnpm add unplugin-stencil

Imports

default (vite plugin)
wrong
```
import stencil from 'unplugin-stencil'
```
correct
```
import stencil from 'unplugin-stencil/vite'
```
Must use subpath import for specific bundler (e.g., '/vite', '/rollup', '/webpack', '/esbuild').

default (rollup plugin)

wrong

const stencil = require('unplugin-stencil/rollup') (CJS works but TS may need esModuleInterop)

correct

import stencil from 'unplugin-stencil/rollup'

default (webpack plugin)

wrong

import stencil from 'unplugin-stencil/webpack' (if using ESM webpack config, use dynamic import)

correct

const stencil = require('unplugin-stencil/webpack')

Nuxt module

wrong

import stencil from 'unplugin-stencil/nuxt' (used as array in nuxt.config modules)

correct

['unplugin-stencil/nuxt', { /* options */ }]

Not a standard import; used as a module entry in nuxt.config.

Quickstart

Shows how to integrate unplugin-stencil with Vite using TypeScript. The plugin accepts Stencil compiler options as an argument.

// vite.config.ts
import { defineConfig } from 'vite';
import stencil from 'unplugin-stencil/vite';

export default defineConfig({
  plugins: [
    stencil({
      // Stencil compiler options (e.g., src: 'src/components', namespace: 'my-lib')
    }),
  ],
});