next.config.js 不得具有其他属性

next.config.js must NOT have additional properties

提问人：Manos Liod 提问时间：8/17/2022 更新时间：8/22/2022 访问量：5566

问：

我有一个下一个.js应用程序，由于某种原因，它开始向我显示有关其他属性的警告。该错误不得具有其他属性，并且它出现在应用程序的编译中。另一个有线的事情是它不会从 next.config 读取NODE_ENV.js并且在开发模式下无法正常工作。它始于我上面写的警告出现时。 任何人都可以帮我解决这个警告吗？

警告

[
  {
    "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
            }),
        )
    )
);
JavaScript Next.js 配置 警告

评论

0赞 Community 8/17/2022
请提供足够的代码，以便其他人可以更好地理解或重现问题。
0赞 jedrzej.kurylo 8/17/2022
生成的配置是否具有正确的结构？看console.log(JSON.stringify(module.exports, null, 2))
0赞 juliomalves 8/18/2022
您有多个属性在 中无效。只需浏览每个错误条目并更正/删除它们即可。此外，是一个 webpack 插件，应该进入属性。next.config.jsPreloadWebpackPluginwebpack

答：

4赞 Manos Liod 8/22/2022 #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));
};

评论

1赞 conor909 10/17/2022
小小的变化是什么？
0赞 Manos Liod 10/19/2022
我只是更新nextjs，然后按照文档进行操作...我实际上更改了模块导出并使其成为异步函数。检查原始代码和上面的更新

上一个：如何停止 Google 表格“资源<网址>已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用”警告

下一个：如何修复GraalVM警告：无法创建系统终端，创建哑终端