3f9b930815
* Error on Invalid PostCSS Shape * Add link to docs
2.3 KiB
2.3 KiB
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:
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.
Common Errors
Before: plugin is require()'d
const pluginA = require('postcss-plugin-a')
module.exports = {
plugins: [require('postcss-plugin'), pluginA],
}
After
module.exports = {
plugins: ['postcss-plugin', 'postcss-plugin-a'],
}
Before: plugin is instantiated with configuration
module.exports = {
plugins: [
require('postcss-plugin')({
optionA: '...',
}),
],
}
After
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
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
module.exports = {
plugins: [
[
'postcss-plugin-1',
{
optionA: '...',
},
],
// Only string:
'postcss-plugin-2',
],
}