PostCSS "Loading PostCSS Plugin failed" in CI
PostCSS resolves each plugin named in its config and instantiates it. "Loading PostCSS Plugin failed" means one plugin could not be required or threw during setup, naming the plugin and a nested cause.
What this error means
The build fails with "Loading PostCSS Plugin failed: Cannot find module 'postcss-nested'" or a thrown error from inside the plugin.
postcss
Loading PostCSS Plugin failed: Cannot find module 'postcss-nested'
(@/home/runner/work/app/app/postcss.config.js)Common causes
The plugin is not installed in CI
A plugin referenced in postcss.config.js is not in package.json, so a clean install never fetches it.
The plugin name is misspelled or wrong format
A typo in the plugin name, or passing a plugin where PostCSS expects a factory call, makes loading fail.
How to fix it
Install the named plugin
- Read which plugin the error names.
- Add it to devDependencies and reinstall.
- Re-run the CSS build.
Terminal
npm install --save-dev postcss-nestedFix the plugin reference in config
Reference each plugin by its exact package name and call factory plugins as functions where required.
postcss.config.js
// postcss.config.js
export default {
plugins: { 'postcss-nested': {}, autoprefixer: {} },
};How to prevent it
- List every PostCSS plugin in devDependencies.
- Use exact package names in the PostCSS config.
- Run the CSS build in CI on a clean install to catch missing plugins.
Related guides
PostCSS "postcss-import: Failed to find" in CIFix postcss-import "Failed to find './foo.css'" in CI - an @import in a stylesheet points at a path the resol…
Tailwind "PostCSS plugin tailwindcss requires PostCSS 8" in CIFix "It looks like you're trying to use tailwindcss with PostCSS 7" / "requires PostCSS 8" in CI - the instal…
Tailwind "Cannot find module 'tailwindcss'" in CIFix "Cannot find module 'tailwindcss'" in CI - the PostCSS config references the tailwindcss plugin but the p…