44d1a1cb15
This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459
131 lines
2.4 KiB
Text
131 lines
2.4 KiB
Text
---
|
|
title: Invalid PostCSS Configuration
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
PostCSS configuration was provided in an unsupported shape.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
PostCSS configuration must be defined in the following shape:
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: [
|
|
// A plugin that does not require configuration:
|
|
'simple-plugin-example',
|
|
|
|
// A plugin which needs a configuration object:
|
|
[
|
|
'plugin-with-configuration',
|
|
{
|
|
optionA: '...',
|
|
},
|
|
],
|
|
|
|
// A plugin that is toggled on or off based on environment:
|
|
[
|
|
'plugin-toggled',
|
|
process.env.NODE_ENV === 'production'
|
|
? {
|
|
optionA: '...',
|
|
}
|
|
: false,
|
|
],
|
|
|
|
// Boolean expressions are also valid.
|
|
// `true` enables the plugin, `false` disables the plugin:
|
|
['plugin-toggled-2', true /* a === b, etc */],
|
|
],
|
|
}
|
|
```
|
|
|
|
You can [read more about configuring PostCSS in Next.js here](/docs/pages/building-your-application/configuring/post-css).
|
|
|
|
#### Common Errors
|
|
|
|
**Before: plugin is require()'d**
|
|
|
|
```js filename="postcss.config.js"
|
|
const pluginA = require('postcss-plugin-a')
|
|
module.exports = {
|
|
plugins: [require('postcss-plugin'), pluginA],
|
|
}
|
|
```
|
|
|
|
**After**
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: ['postcss-plugin', 'postcss-plugin-a'],
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Before: plugin is instantiated with configuration**
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: [
|
|
require('postcss-plugin')({
|
|
optionA: '...',
|
|
}),
|
|
],
|
|
}
|
|
```
|
|
|
|
**After**
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: [
|
|
// Pay attention to this nested array. The first index is the plugin name,
|
|
// the second index is the configuration.
|
|
[
|
|
'postcss-plugin',
|
|
{
|
|
optionA: '...',
|
|
},
|
|
],
|
|
],
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Before: plugin is missing configuration**
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: [
|
|
[
|
|
'postcss-plugin-1',
|
|
{
|
|
optionA: '...',
|
|
},
|
|
],
|
|
// This single-entry array is detected as misconfigured because it's
|
|
// missing the second element. To fix, unwrap the value.
|
|
['postcss-plugin-2'],
|
|
],
|
|
}
|
|
```
|
|
|
|
**After**
|
|
|
|
```js filename="postcss.config.js"
|
|
module.exports = {
|
|
plugins: [
|
|
[
|
|
'postcss-plugin-1',
|
|
{
|
|
optionA: '...',
|
|
},
|
|
],
|
|
// Only string:
|
|
'postcss-plugin-2',
|
|
],
|
|
}
|
|
```
|