检测到无效的 next.config.js 选项 - 根值具有意外属性

Question

将我的下一个版本从 10 更新到 12，当我运行本地开发服务器时，终端中出现以下错误，因此代码无法编译。我该如何解决这个问题？

检测到无效的 next.config.js 选项：

• 根值有一个意外的属性 webpackDevMiddleware，它不在允许的属性列表中（amp、analyticsId、assetPrefix、basePath、cleanDistDir、compiler、compress、crossOrigin、devIndicators、distDir、env、eslint、excludeDefaultMomentLocales、experimental、exportPathMap、未来，generateBuildId，generateEtags，标题，httpAgentOptions，i18n，图像，onDemandEntries，optimizeFonts，输出，outputFileTracing，pageExtensions，poweredByHeader，生产浏览器源映射，publicRuntimeConfig，reactStrictMode，重定向，重写，sassOptions，serverRuntimeConfig，staticPageGenerationTimeout，swcMinify，trailingSlash，typescript，useFileSystemPublicRoutes ,网页包）。
• 根值具有意外属性 configOrigin，该属性不在允许的属性列表中。
• 根值具有意外属性 target，该属性不在允许的属性列表中。
• root 值具有意外属性 webpack5，该属性不在允许的属性列表中。
• 根值有一个意外的属性，即缓存，它不在允许的属性列表中。
• 根值有一个意外的属性，exotics，它不在允许的属性列表中。
• 根值有一个意外的属性，resolveId，它不在允许的属性列表中。
• 根值具有意外属性 svgo，该属性不在允许的属性列表中。
• 根值具有意外属性 cssModules，该属性不在允许的属性列表中。
• 根值具有意外属性 cssLoaderOptions，该属性不在允许的属性列表中。
• 根值具有意外属性 sassLoaderOptions，该属性不在允许的属性列表中。
• .amp.canonicalBase 处的值必须为 1 个字符或更多，但实际为 0 个字符。
• .devIndicators 处的值具有意外属性 autoPrerender，该属性不在允许的属性（buildActivity、buildActivityPosition）列表中。
• .experimental.outputFileTracingRoot 处的值必须为 1 个字符或更多，但实际为 0 个字符。
• .i18n 处的值必须是一个对象，但它为 null。

我当前的下一个配置文件

const composePlugins = require ('next-compose-plugins');
const css = require('@zeit/next-css');
const optimizedImages = require ('next-optimized-images');
const transpileModules = require ('next-transpile-modules');
const path = require ('path');
const readFileSync = require ('jsonfile').readFileSync;
const realpathSync = require ('fs').realpathSync;
const resolve = require ('resolve');
const sass = require('@zeit/next-sass');
const lodashWebpack = require ('lodash-webpack-plugin');

// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = realpathSync (process.cwd ());
const resolveApp = relativePath => path.resolve (appDirectory, relativePath);
const paths = require (resolveApp ('config/paths'));
const packageJson = readFileSync (paths.appPackageJson);
// const withPreact = require('next-plugin-preact');

const root = packageJson.homepage;
const dev = !(process.env.NODE_ENV
  ? process.env.NODE_ENV.indexOf (`production`) + 1
  : false);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const withBundleAnalyzer = require ('@next/bundle-analyzer') ({
  enabled: process.env.ANALYZE === 'true',
});
let nextEnv = process.env.NEXT_ENV;
for (let argument of process.argv) {
  if (argument.indexOf (`--next-env=`) > -1) {
    nextEnv = argument.split (`=`)[1];
  }
}
const nextConfig = {
   async redirects() {
    return [
      {
        source: '/',
        destination: '/forbusiness',
        basePath: false,
        permanent: false,
      },
    ]
  },
  assetPrefix: '/forbusiness',
  basePath: '/forbusiness',
  images: {
    domains: ['att.com', 'directv.com'],
  },
  devIndicators: {
    autoPrerender: false,
  },
  distDir: `dist`,
  // Will only be available on the server side
  serverRuntimeConfig: {
    devProxy: process.env.APP_DEV_PROXY,
    nextEnv,
    popCacheInt: process.env.UF_CACHE_INT,
    pxy: process.env.APP_HTTP_PROXY,
    solrEnv: process.env.IDP_SOLR_ENV,
  },
  // Will be available on both server and client.
  publicRuntimeConfig: {
    NEXT_PUBLIC_ENV: process.env.NEXT_PUBLIC_ENV,
    prod: !dev,
    root,
    local: process.env.ENV,
    NEXT_PUBLIC_MICROPROPERTIES_OID: process.env.NEXT_PUBLIC_MICROPROPERTIES_OID,
    NEXT_PUBLIC_MICROPROPERTIES_RECORD_TYPE: process.env.NEXT_PUBLIC_MICROPROPERTIES_RECORD_TYPE,
    NEXT_PUBLIC_MICROPROPERTIES_ORG_BASE_URL: process.env.NEXT_PUBLIC_MICROPROPERTIES_ORG_BASE_URL
  },
  // Use a consistent build id for deployments in multiple locations:
  // See: https://github.com/zeit/next.js#configuring-the-build-id
  generateBuildId: async () => {
    return packageJson.version;
  },
  webpack: (config, options) => {
    const {dir, isServer} = options;
    const newConfig = {...config};
    const originalEntry = newConfig.entry;

    newConfig.externals = [];

    // Some libraries import Node modules but don't use them in the browser.
    // Tell Webpack to provide empty mocks for them so importing them works.
    newConfig.node = {
      dgram: `empty`,
      dns: `empty`,
      fs: `empty`,
      net: `empty`,
      tls: `empty`,
      child_process: `empty`,
      path: 'empty',
      __dirname: true,
    };

    newConfig.entry = async () => {
      const entries = await originalEntry ();
      if (
        entries['main.js'] &&
        !entries['main.js'].includes ('./src/services/Polyfills/polyfill.js')
      ) {
        entries['main.js'].unshift ('./src/services/Polyfills/polyfill.js');
      }
      return entries;
    };

    // Rename the webpack function to not conflict with the dynatrace webpack function.
    newConfig.output.jsonpFunction = `salesJsonp`;

    if (isServer) {
      newConfig.externals.push ((context, request, callback) => {
        resolve (
          request,
          {basedir: dir, preserveSymlinks: true},
          (err, res) => {
            if (err) {
              return callback ();
            }
            if (
              res.match (/node_modules[/\\].*\.js/) &&
              !res.match (/node_modules[/\\]webpack/) &&
              !res.match (/node_modules[/\\]@idp/) &&
              !res.match (/node_modules[/\\]@video/)
            ) {
              return callback (null, `commonjs ${request}`);
            }
            callback ();
          }
        );
      });
    }
    newConfig.module.rules.push ({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 100000,
            fallback: 'file-loader',
            outputPath: `./static/fonts/`,
          },
        },
      ],
    });
    newConfig.plugins = newConfig.plugins.filter (plugin => {
      if (plugin.constructor.name === 'ForkTsCheckerWebpackPlugin')
        return false;
      return true;
    });
    return newConfig;
  },
};

module.exports = composePlugins (
  [
    [
      lodashWebpack,
      {
        caching: true,
        exotics: true,
      },
    ],
    [
      optimizedImages,
      {
        svgo: {
          plugins: [
            {
              removeComments: true,
              cleanupAttrs: true,
              inlineStyles: true,
              minifyStyles: true,
            },
          ],
        },
      },
    ],    
    [css, {
        cssModules: true,
        cssLoaderOptions: {
            camelCase: true,
            import: true,
            importLoaders: 1,
            localIdentName: dev ? '_[local]_[hash:base64:5]' : `_[hash:base64:5]`,
            minimize: true,
            modules: true,
            sourceMap: shouldUseSourceMap,
        },
    }],
    [sass, {
        cssModules: true,
        cssLoaderOptions: {
            camelCase: true,
            import: true,
            importLoaders: 1,
            localIdentName: dev ? '_[local]_[hash:base64:5]' : `_[hash:base64:5]`,
            minimize: true,
            modules: true,
            sourceMap: shouldUseSourceMap,
        },
        sassLoaderOptions: {
            outputStyle: 'compressed',
            precision: 5,
        }
    }],
    [withBundleAnalyzer, {}],
  ],
  nextConfig
);

Answer 1

next-compose-plugins不适用于较新版本的 Next。您需要删除它并重建您的配置。

请参阅： https: //github.com/cyrilwanner/next-compose-plugins/issues/59