webpack-prettier-plugin

1.0.3 verified Sat Apr 25 auth: no javascript maintenance

A webpack plugin that automatically reformats code (JavaScript, JSON, CSS, Sass) using Prettier during the build process. Version 1.0.3 is the latest, with an unknown release cadence. Its key differentiator is simplicity—three steps to integrate. However, it is a minimal wrapper around Prettier with limited documentation and no active development, making it less robust than alternatives like prettier-webpack-plugin.

Common errors

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

cause Package not installed or misspelled

fix

npm install --save-dev webpack-prettier-plugin

error TypeError: WebpackPrettierPlugin is not a constructor ↓

cause Using named import instead of default require()

fix

Use const WebpackPrettierPlugin = require('webpack-prettier-plugin'); new WebpackPrettierPlugin()

Warnings

gotcha Plugin does not support ESM import syntax. Must use require(). ↓

fix Use const WebpackPrettierPlugin = require('webpack-prettier-plugin') instead of import.

gotcha The plugin name in the README example uses PrettierPlugin but the actual export is WebpackPrettierPlugin. ↓

fix Use const WebpackPrettierPlugin = require('webpack-prettier-plugin'); new WebpackPrettierPlugin()

gotcha No explicit error if prettier is not installed; may fail silently. ↓

fix Ensure prettier is installed as a devDependency: npm install --save-dev prettier

Install

npm install webpack-prettier-plugin

yarn add webpack-prettier-plugin

pnpm add webpack-prettier-plugin

Imports

default

wrong

import WebpackPrettierPlugin from 'webpack-prettier-plugin'

correct

const WebpackPrettierPlugin = require('webpack-prettier-plugin')

Package does not export ESM; use CommonJS require().

WebpackPrettierPlugin

wrong

const { WebpackPrettierPlugin } = require('webpack-prettier-plugin')

correct

const WebpackPrettierPlugin = require('webpack-prettier-plugin')

Default export is the plugin class, not named.

PrettierPlugin

wrong

new require('webpack-prettier-plugin').PrettierPlugin()

correct

new (require('webpack-prettier-plugin'))()

Misleading alias; the constructor is the default export.

Quickstart

Demonstrates registration of the plugin in webpack.config.js using CommonJS require() and instantiation.

// webpack.config.js
const WebpackPrettierPlugin = require('webpack-prettier-plugin');

module.exports = {
  // ... other config
  plugins: [
    new WebpackPrettierPlugin()
  ]
};