{"id":18955,"library":"add-charset-webpack-plugin","title":"Add Charset Webpack Plugin","description":"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.","status":"active","version":"1.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/VN666/add-charset-webpack-plugin","tags":["javascript","rspack","webpack","plugin","charset","css","add-charset-webpack-plugin"],"install":[{"cmd":"npm install add-charset-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add add-charset-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add add-charset-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a default class; named destructuring with require will fail.","wrong":"const { AddCharsetWebpackPlugin } = require('add-charset-webpack-plugin')","symbol":"AddCharsetWebpackPlugin","correct":"import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'"},{"note":"CommonJS require returns the class directly, not a module with a default property.","wrong":"const AddCharsetWebpackPlugin = require('add-charset-webpack-plugin').default","symbol":"AddCharsetWebpackPlugin","correct":"const AddCharsetWebpackPlugin = require('add-charset-webpack-plugin')"},{"note":"Named import is incorrect; the plugin is the default export.","wrong":"import { AddCharsetWebpackPlugin } from 'add-charset-webpack-plugin'","symbol":"AddCharsetWebpackPlugin","correct":"import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'"}],"quickstart":{"code":"// webpack.config.js or rspack.config.js\nconst AddCharsetWebpackPlugin = require('add-charset-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new AddCharsetWebpackPlugin({\n      charset: 'utf-8'\n    })\n  ]\n};","lang":"javascript","description":"Demonstrates configuring the plugin with CommonJS require, setting charset to utf-8."},"warnings":[{"fix":"Ensure CSS files are emitted as separate files via MiniCssExtractPlugin or similar.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always pass a quoted string like 'utf-8' or 'ISO-8859-1'.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change to default import: import AddCharsetWebpackPlugin from 'add-charset-webpack-plugin'","cause":"Using named import { AddCharsetWebpackPlugin } from 'add-charset-webpack-plugin'","error":"TypeError: AddCharsetWebpackPlugin is not a constructor"},{"fix":"Run: npm install add-charset-webpack-plugin","cause":"Package not installed or typo in package name","error":"Module not found: Error: Can't resolve 'add-charset-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}