next.config.js 不能有額外的屬性

Question

我有一個 next.js 應用程序，由於某種原因，它開始向我顯示有關其他屬性的警告。 該錯誤不能有其他屬性並且它出現在應用程序的編譯中。 另一個連線的事情是它沒有從 next.config.js 讀取 NODE_ENV 並且它在開發模式下無法正常工作。 它始於我上面寫的警告出現的時候。 誰能幫我解決這個警告？

警告

[
  {
    "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

最后似乎 Next.js 只是想在 next.config.js 中進行更新和小重構。所以，現在它看起來像這樣，沒有任何警告！

// @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));
};