next.config.js 不能有额外的属性

Question

I have a next.js application and for some reason it started to show me a warning about additional properties. The error is must NOT have additional properties and its appearing in the compilation of the app. An other wired thing is that it doesn't read the NODE_ENV from next.config.js and its not working properly on development mode. And it started at the time the warning i wrote above appeared. Can anyone please help me with this warning?

WARN

[
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "webpackDevMiddleware"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "configOrigin"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "target"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "analyticsId"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "webpack5"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "video_headers"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "options"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "/amp/canonicalBase",
    "schemaPath": "#/properties/amp/properties/canonicalBase/minLength",
    "keyword": "minLength",
    "params": {
      "limit": 1
    },
    "message": "must NOT have fewer than 1 characters"
  },
  {
    "instancePath": "/assetPrefix",
    "schemaPath": "#/properties/assetPrefix/minLength",
    "keyword": "minLength",
    "params": {
      "limit": 1
    },
    "message": "must NOT have fewer than 1 characters"
  },
  {
    "instancePath": "/basePath",
    "schemaPath": "#/properties/basePath/minLength",
    "keyword": "minLength",
    "params": {
      "limit": 1
    },
    "message": "must NOT have fewer than 1 characters"
  },
  {
    "instancePath": "/experimental/outputFileTracingRoot",
    "schemaPath": "#/properties/experimental/properties/outputFileTracingRoot/minLength",
    "keyword": "minLength",
    "params": {
      "limit": 1
    },
    "message": "must NOT have fewer than 1 characters"
  },
  {
    "instancePath": "/generateEtags",
    "schemaPath": "#/properties/generateEtags/isFunction",
    "keyword": "isFunction",
    "params": {},
    "message": "must pass \"isFunction\" keyword validation"
  },
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "useBrowserDefault"
    },
    "message": "must NOT have additional properties"
  }
] 

next.config.js

/**
 * @type {import('next').NextConfig}
 **/

const path = require('path');
const withPWA = require('next-pwa');
const WorkerPlugin = require("worker-plugin");
const runtimeCaching = require('next-pwa/cache');
const withPlugins = require('next-compose-plugins');
const withModernizr = require('next-plugin-modernizr');
const withBundleAnalyzer = require('@next/bundle-analyzer');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const withTM = require('next-transpile-modules')(['@fancyapps/ui', '@googlemaps/typescript-guards']); // pass the modules you would like to see transpiled
// const {
//     createVanillaExtractPlugin
// } = require('@vanilla-extract/next-plugin');
// const withVanillaExtract = createVanillaExtractPlugin();

const headers = async () => {
    return [
        {
            source: '/(.*)',
            headers: [
                {
                    key: 'X-Content-Type-Options',
                    value: 'nosniff'
                },
                {
                    key: 'X-Frame-Options',
                    value: 'SAMEORIGIN'
                },
                {
                    key: 'X-XSS-Protection',
                    value: '1; mode=block'
                }
            ]
        }
    ]
}
const video_headers = async () => {
    return [
        {
            source: '/:all*(mp4|webm)',
            headers: [
                {
                    key: 'Cache-Control',
                    value:
                        'public, max-age=84600, must-revalidate'
                }
            ]
        }
    ]
}

module.exports = withPlugins(
    [
        withBundleAnalyzer({
            enabled: process.env.ANALYZE === 'true'
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script'
        })
    ],
    withTM(
        withPWA(
            withModernizr({
                webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
                    if (!isServer) {
                        config.plugins.push(
                            new WorkerPlugin({
                                // use "self" as the global object when receiving hot updates.
                                globalObject: "self"
                            })
                        );
                    }
                    return config;
                },
                headers,
                video_headers,
                i18n: {
                    locales: ['en-US'],
                    defaultLocale: 'en-US',
                    useBrowserDefault: true
                },
                async redirects() {
                    return [
                        {
                            source: '/property/:property/:all',
                            destination: '/',
                            permanent: true
                        }
                    ]
                },
                pwa: {
                    disable: process.env.NODE_ENV === 'development',
                    dest: 'public',
                    register: true,
                    skipWaiting: true,
                    runtimeCaching,
                    buildExcludes: [/manifest.json$/],
                    maximumFileSizeToCacheInBytes: 5000000
                },
                compiler: {
                    // ssr and displayName are configured by default
                    styledComponents: true
                },
                poweredByHeader: false,
                swcMinify: false,
                compress: false,
                reactStrictMode: true,
                productionBrowserSourceMaps: true,
                sassOptions: {
                    includePaths: [path.join(__dirname, 'styles')]
                },
                images: {
                    domains: [
                        's3-eu-central-1.amazonaws.com',
                        'loggia-cdn.s3.eu-central-1.amazonaws.com'
                    ],
                    formats: ['image/webp'],
                    minimumCacheTTL: 86400
                },
                optimizeFonts: true
            }),
        )
    )
);

Answer 1

It finally seems that Next.js just wanted an update and a small refactor in next.config.js.. So, now it looks like this without any warning!

// @ts-check
/**
 * @type {import('next').NextConfig}
 **/

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

const path = require('path');
const withPWA = require('next-pwa');
const WorkerPlugin = require("worker-plugin");
const runtimeCaching = require('next-pwa/cache');
const withModernizr = require('next-plugin-modernizr');
const withBundleAnalyzer = require('@next/bundle-analyzer');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const withTM = require('next-transpile-modules')(['@fancyapps/ui', '@googlemaps/typescript-guards']); // pass the modules you would like to see transpiled

module.exports = async (phase, { defaultConfig }) => {
    const headers = async () => {
        return [
            {
                source: '/(.*)',
                headers: [
                    {
                        key: 'X-Content-Type-Options',
                        value: 'nosniff'
                    },
                    {
                        key: 'X-Frame-Options',
                        value: 'SAMEORIGIN'
                    },
                    {
                        key: 'X-XSS-Protection',
                        value: '1; mode=block'
                    }
                ]
            },
            // VIDEO HEADERS
            {
                source: '/:all*(mp4|webm)',
                headers: [
                    {
                        key: 'Cache-Control',
                        value:
                            'public, max-age=84600, must-revalidate'
                    }
                ]
            }
        ]
    }

    const nextConfig = {
        headers,
        webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
            const newConfig = config;
            newConfig.plugins.push(
                withBundleAnalyzer({
                    enabled: process.env.ANALYZE === 'true',
                })
            );
            if (!isServer) {
                newConfig.plugins.push(
                    new WorkerPlugin({
                        // use "self" as the global object when receiving hot updates.
                        globalObject: "self"
                    })
                );
            }
            return newConfig;
        },
        i18n: {
            locales: ['en'],
            defaultLocale: 'en'
        },
        async rewrites() {
            const rewrites = await fetch(process.env.SCHEME + process.env.API_URL + '/rewrites');
            return await rewrites.json();
        },
        async redirects() {
            return [
                {
                    source: '/property/:property/:all',
                    destination: '/',
                    permanent: true
                }
            ]
        },
        compiler: {
            // ssr and displayName are configured by default
            styledComponents: true
        },
        poweredByHeader: false,
        swcMinify: false,
        compress: false,
        reactStrictMode: true,
        productionBrowserSourceMaps: true,
        sassOptions: {
            includePaths: [path.join(__dirname, 'styles')]
        },
        images: {
            domains: [
                's3-eu-central-1.amazonaws.com',
                'loggia-cdn.s3.eu-central-1.amazonaws.com'
            ],
            formats: ['image/webp'],
            minimumCacheTTL: 86400
        },
        optimizeFonts: true
    }

    var nextConfigWithPWA = null;

    if(!(phase === PHASE_DEVELOPMENT_SERVER)){
        nextConfigWithPWA = withPWA({
            pwa: {
                dest: 'public',
                register: true,
                skipWaiting: true,
                runtimeCaching,
                buildExcludes: [/manifest.json$/],
                maximumFileSizeToCacheInBytes: 5000000
            },
            ...nextConfig
        });
    }

    return withTM(withModernizr(phase === PHASE_DEVELOPMENT_SERVER ? nextConfig : nextConfigWithPWA));
};