Prettier Webpack Plugin

1.2.0 verified Sat Apr 25 auth: no javascript maintenance

Automatically formats source files with Prettier during Webpack bundling. Version 1.2.0 supports Webpack 4 (peer dep webpack@^4.2.0) and Prettier ^1.0.0. The plugin reads all dependency files, processes matching extensions (defaults based on Prettier's getSupportInfo), and overwrites them. Key differentiator from a loader: overwrites files directly, not transforming in-memory. Limited to Node.js with Webpack; not maintained since 2018. Alternatives: prettier-webpack-loader for in-memory formatting, or eslint-webpack-plugin with prettier rules for broader linting.

Common errors

error Cannot find module 'prettier-webpack-plugin' ↓

cause Package not installed or mismatched version.

fix

Run 'npm install --save-dev prettier prettier-webpack-plugin' or 'yarn add --dev prettier prettier-webpack-plugin'.

error Error: Plugin could not be instantiated. Is Prettier installed? ↓

cause Peer dependency prettier missing.

fix

Install prettier: 'npm install prettier' or add to devDependencies.

error TypeError: prettierWebpackPlugin is not a constructor ↓

cause Using import instead of require (ESM vs CJS).

fix

Use 'const PrettierPlugin = require('prettier-webpack-plugin');' instead of import.

Warnings

breaking Webpack 4 support requires version 1.x; version 0.x only supports Webpack 3. ↓

fix Upgrade to prettier-webpack-plugin@1 and ensure webpack@^4.2.0 is installed.

gotcha Plugin overwrites original source files (not in-memory). Use version control to avoid loss. ↓

fix Ensure files are committed before bundling; consider using prettier-webpack-loader for in-memory only.

deprecated Package is unmaintained since 2018; no security updates or compatibility with modern Webpack/Prettier. ↓

fix Migrate to prettier-webpack-loader or configure Prettier via IDE/CI.

gotcha Prettier options are passed directly; plugin-specific options (encoding, extensions, configFile) may conflict if Prettier adds same-named options. ↓

fix Review Prettier options before specifying plugin-specific ones; use configFile to externalize.

Install

npm install prettier-webpack-plugin

yarn add prettier-webpack-plugin

pnpm add prettier-webpack-plugin

Imports

default export

wrong

import PrettierPlugin from 'prettier-webpack-plugin';

correct

const PrettierPlugin = require('prettier-webpack-plugin');

Package is CommonJS only; no ESM export.

Plugin instantiation
wrong
```
new PrettierPlugin.default({})
```
correct
```
new PrettierPlugin({ /* options */ })
```
No .default; direct require exports the constructor.

TypeScript usage

wrong

import * as PrettierPlugin from 'prettier-webpack-plugin';

correct

const PrettierPlugin = require('prettier-webpack-plugin');

No type definitions; use @types if needed. Avoid star import due to CJS.

Quickstart

Webpack config using prettier-webpack-plugin with Prettier options, custom extensions, and config file.

const PrettierPlugin = require('prettier-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new PrettierPlugin({
      printWidth: 80,
      tabWidth: 2,
      useTabs: false,
      semi: true,
      encoding: 'utf-8',
      extensions: ['.js', '.ts'],
      configFile: '.prettierrc',
    }),
  ],
};