PostCSS "received undefined" - Fix in CI

By Daniel Zoghalchali·Latchkey

PostCSS expects a CSS string but got undefined. Usually a loader chain is mis-ordered, or a non-CSS asset was routed through PostCSS, so it receives no source to parse.

What this error means

The build throws PostCSS received undefined instead of a CSS string from postcss-loader or the PostCSS plugin step.

Error: PostCSS received undefined instead of CSS string
    at LazyResult (/app/node_modules/postcss/lib/lazy-result.js)
    at new Processor (/app/node_modules/postcss/lib/processor.js)

Common causes

Loader order wrong

PostCSS ran before css-loader produced a string, or a loader earlier in the chain returned undefined.

Non-CSS routed to PostCSS

A rule sent a binary asset (image/font) or empty module through postcss-loader.

How to fix it

Fix the loader order

1. Order loaders so css-loader produces a string before postcss-loader runs (loaders apply right-to-left).

// webpack rule for .css
use: ['style-loader', 'css-loader', 'postcss-loader']

Scope the PostCSS rule to CSS

1. Restrict the test regex so only CSS files reach PostCSS.

{ test: /\.css$/, use: ['css-loader', 'postcss-loader'] }

How to prevent it

• Keep loader chains ordered correctly and scoped by file type.
• Do not route binary assets through text-based CSS loaders.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation