javascript - next.config.js must NOT have additional properties - Stack Overflow

admin管理员组

文章数量:1406052

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 pilation 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-pose-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
                },
                piler: {
                    // ssr and displayName are configured by default
                    styledComponents: true
                },
                poweredByHeader: false,
                swcMinify: false,
                press: false,
                reactStrictMode: true,
                productionBrowserSourceMaps: true,
                sassOptions: {
                    includePaths: [path.join(__dirname, 'styles')]
                },
                images: {
                    domains: [
                        'my-domain-1',
                        'my-domain-2'
                    ],
                    formats: ['image/webp'],
                    minimumCacheTTL: 86400
                },
                optimizeFonts: true
            }),
        )
    )
);

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 pilation 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-pose-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
                },
                piler: {
                    // ssr and displayName are configured by default
                    styledComponents: true
                },
                poweredByHeader: false,
                swcMinify: false,
                press: false,
                reactStrictMode: true,
                productionBrowserSourceMaps: true,
                sassOptions: {
                    includePaths: [path.join(__dirname, 'styles')]
                },
                images: {
                    domains: [
                        'my-domain-1',
                        'my-domain-2'
                    ],
                    formats: ['image/webp'],
                    minimumCacheTTL: 86400
                },
                optimizeFonts: true
            }),
        )
    )
);

• javascript
• next.js
• config
• warnings

Share Improve this question Follow edited Oct 18, 2024 at 5:52 Manos Liod asked Aug 17, 2022 at 4:43 Manos LiodManos Liod 11111 silver badge88 bronze badges 3

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Aug 17, 2022 at 5:10
• Does the generated config have the right structure? See console.log(JSON.stringify(module.exports, null, 2)) – jedrzej.kurylo Commented Aug 17, 2022 at 5:15
• You have several properties that aren't valid in next.config.js. Just go through each of the error entries and correct/remove them. Also, PreloadWebpackPlugin is a webpack plugin and should go inside the webpack property. – juliomalves Commented Aug 17, 2022 at 21:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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
                }
            ]
        },
        piler: {
            // ssr and displayName are configured by default
            styledComponents: true
        },
        poweredByHeader: false,
        swcMinify: false,
        press: false,
        reactStrictMode: true,
        productionBrowserSourceMaps: true,
        sassOptions: {
            includePaths: [path.join(__dirname, 'styles')]
        },
        images: {
            domains: [
                'my-domain-1',
                'my-domain-2'
            ],
            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));
};

本文标签： javascriptnextconfigjs must NOT have additional propertiesStack Overflow