Incompatible with next.js 12.2.0: “Invalid next.config.js options detected” in cyrilwanner next-compose-plugins

Explanation of the problem

While compiling with Next.js version 12.2.0, the following warning is displayed: “Invalid next.config.js options detected”. This warning is shown even when an empty array is passed for the “plugins” parameter.

The warning message lists multiple validation errors regarding the “next.config.js” file. Each error includes the following details:

• “instancePath”: the location of the error in the “next.config.js” file.
• “schemaPath”: the location in the JSON schema that the error violates.
• “keyword”: the JSON schema keyword that the error violates.
• “params”: additional parameters for the keyword.
• “message”: a human-readable description of the error.

An example of one of these errors is:

  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "webpackDevMiddleware"
    },
    "message": "must NOT have additional properties"
  }

To resolve these errors, you should modify your “next.config.js” file to meet the constraints specified in the JSON schema. Ensure that properties, types, and function signatures match the expected values, and remove any additional properties that are not allowed. By doing so, the warning message should no longer appear during compilation.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Incompatible with next.js 12.2.0: “Invalid next.config.js options detected” in cyrilwanner next-compose-plugins

The issue at hand is related to the integration of NextJS and next-compose-plugins. The next-compose-plugins package is an external plugin that provides a collection of utilities to extend the functionality of NextJS. However, it appears that the package has been unmaintained, which is causing issues with its integration.

To resolve the issue, one proposed solution is to completely ignore the defaultConfig in the integration process. According to the code provided, using the defaultConfig as is causes an error and hence, it is suggested to just ignore its existence. The code uses the withPlugins utility from the next-compose-plugins package to create a new NextJS configuration with a strict React mode and swc minification enabled.

module.exports = async (phase) => {
    /** @type {import('next').NextConfig} */
    const nextConfig = {
        reactStrictMode: true,
        swcMinify: true
    };

    const defaultConfig = {}
    return withPlugins([], nextConfig)(phase, { defaultConfig });
    // return withPlugins([], nextConfig)(phase, { undefined }); // also works
};

Other popular problems with next-compose-plugins

Problem: Unmaintained Package

One of the most common issues with next-compose-plugins is that it is an unmaintained package. This can lead to compatibility issues with newer versions of Next.js and other dependencies.

Solution:

To resolve this issue, some developers have opted to replace next-compose-plugins with alternative packages that are still being actively maintained.

module.exports = (_phase, { defaultConfig }) => {
    const plugins = [withStaticImport, withBundleAnalyzer, withCustomWebpack]
    return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...config })
}

In the code above, we can see an example of a developer replacing next-compose-plugins with an array of alternative plugins. This allows them to maintain compatibility with their dependencies and continue using Next.js without any issues.

Problem: Inconsistent API

Another common issue with next-compose-plugins is that its API can be inconsistent across different versions. This can result in compatibility issues and confusion when trying to implement the package in your Next.js application.

Solution:

To resolve this issue, some developers have opted to use alternative packages that have a more consistent API and are better documented.

// Example code showing the use of an alternative package with a more consistent API
const withPlugins = require('next-compose-plugins')

module.exports = withPlugins([
  [withCSS, { cssModules: true }],
  [withImages, { inlineImageLimit: 8192 }],
  [withSass, {
    cssModules: true,
    sassLoaderOptions: {
      includePaths: ['styles', 'node_modules']
        .map(d => path.join(__dirname, d))
        .map(g => resolve(g))
    }
  }]
], {
  webpack: (config, { isServer, buildId, dev, defaultLoaders, webpack }) => {
    // Add your custom webpack config here
    return config
  }
})

In the code above, we can see an example of a developer using an alternative package with a more consistent API

Problem: Inconsistent Plugin Functionality

Another issue with next-compose-plugins is that the functionality of the plugins may not always be consistent. This can lead to unexpected behavior and may require debugging to resolve.

Solution:

To address this issue, it is recommended to thoroughly test all plugins before using them and to use them with caution. In addition, it may be helpful to seek out alternative plugins or solutions that are better suited for the intended use case.

A brief introduction to next-compose-plugins

next-compose-plugins is a popular module in the Next.js ecosystem that makes it easier to customize and extend the functionality of a Next.js application. It is a high-level utility that allows developers to add custom configuration and additional plugins to their Next.js app by simply composing them together. The module uses a functional approach and leverages the power of composition to make it easier for developers to customize the behavior of their Next.js applications.

next-compose-plugins provides a simple, yet powerful interface for adding custom configuration and plugins to a Next.js application. It abstracts away the complexities of webpack configuration and makes it easy for developers to extend the functionality of their Next.js apps with custom plugins. With next-compose-plugins, developers can add functionality such as customizing the webpack configuration, adding bundle analyzer, and more, with just a few lines of code. The module is well documented and actively maintained, making it a popular choice among Next.js developers.

Most popular use cases for next-compose-plugins

1. Customizing NextJS webpack configuration: Next-compose-plugins allow developers to extend or customize the default webpack configuration provided by NextJS. This is particularly useful when adding new loaders, plugins or modifying existing configuration. For example, the following code block demonstrates how to add the babel-loader to the NextJS webpack configuration using next-compose-plugins.

const withBabelLoader = (nextConfig = {}) => {
    return {
        ...nextConfig,
        webpack: (config, options) => {
            config.module.rules.push({
                test: /\.(js|jsx)$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }]
            });

            return config;
        }
    };
};

module.exports = withBabelLoader({});

2. Optimizing NextJS build process: Next-compose-plugins can be used to improve the performance of NextJS applications by optimizing the build process. For example, by using a plugin like next-optimized-images, developers can automatically optimize images used in their NextJS application, resulting in faster load times and better performance.
3. Adding custom functionality to NextJS application: Next-compose-plugins can be used to add custom functionality to NextJS applications, such as adding support for serverless functions, integrating with APIs, or adding custom middleware. For example, the following code block demonstrates how to add custom middleware to a NextJS application using next-compose-plugins.

const withCustomMiddleware = (nextConfig = {}) => {
    return {
        ...nextConfig,
        async middleware(req, res, next) {
            // Add custom middleware logic here

            next();
        }
    };
};

module.exports = withCustomMiddleware({});