Add Charset Webpack Plugin

1.0.9 verified Sat Apr 25 auth: no javascript

A Webpack and Rspack plugin that automatically prepends a @charset declaration to every emitted CSS file. Version 1.0.9 is the latest stable release with no active development cadence. It supports both CommonJS and ES modules, works with Webpack 4/5 and Rspack. Unlike manual CSS header additions or postcss plugins, it hooks into the compilation process to guarantee charset placement on all CSS assets with zero configuration overhead.

Common errors

error TypeError: AddCharsetWebpackPlugin is not a constructor ↓

cause Using named import { AddCharsetWebpackPlugin } from 'add-charset-webpack-plugin'

fix

Change to default import: import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'

error Module not found: Error: Can't resolve 'add-charset-webpack-plugin' ↓

cause Package not installed or typo in package name

fix

Run: npm install add-charset-webpack-plugin

Warnings

gotcha Plugin does not add charset to CSS imported via JavaScript (e.g., import './styles.css'). The @charset only applies to emitted CSS chunks, not inline styles. ↓

fix Ensure CSS files are emitted as separate files via MiniCssExtractPlugin or similar.

gotcha If charset option is set to a value that is not a valid CSS charset string (e.g., missing quotes), the plugin will add it verbatim, potentially breaking CSS validity. ↓

fix Always pass a quoted string like 'utf-8' or 'ISO-8859-1'.

Install

npm install add-charset-webpack-plugin

yarn add add-charset-webpack-plugin

pnpm add add-charset-webpack-plugin

Imports

AddCharsetWebpackPlugin

wrong

const { AddCharsetWebpackPlugin } = require('add-charset-webpack-plugin')

correct

import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'

The package exports a default class; named destructuring with require will fail.

AddCharsetWebpackPlugin

wrong

const AddCharsetWebpackPlugin = require('add-charset-webpack-plugin').default

correct

const AddCharsetWebpackPlugin = require('add-charset-webpack-plugin')

CommonJS require returns the class directly, not a module with a default property.

AddCharsetWebpackPlugin

wrong

import { AddCharsetWebpackPlugin } from 'add-charset-webpack-plugin'

correct

import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'

Named import is incorrect; the plugin is the default export.

Quickstart

Demonstrates configuring the plugin with CommonJS require, setting charset to utf-8.

// webpack.config.js or rspack.config.js
const AddCharsetWebpackPlugin = require('add-charset-webpack-plugin');

module.exports = {
  plugins: [
    new AddCharsetWebpackPlugin({
      charset: 'utf-8'
    })
  ]
};