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',
      ],
    }