nextConfig issue while building or running the project

[yashgandhi303]

trafficstars

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 14.19.0
      npm: 6.14.16
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.2.4-canary.8
      eslint-config-next: 11.0.1
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

next config file is throwing error while building and warning while development

warn  - Invalid next.config.js options detected: 
[
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "webpack5"
    },
    "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": "webpackDevMiddleware"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "configOrigin"
    },
    "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": "/experimental/outputFileTracingRoot",
    "schemaPath": "#/properties/experimental/properties/outputFileTracingRoot/minLength",
    "keyword": "minLength",
    "params": {
      "limit": 1
    },
    "message": "must NOT have fewer than 1 characters"
  },
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/type",
    "keyword": "type",
    "params": {
      "type": "object"
    },
    "message": "must be object"
  }
] 
See more info here: https://nextjs.org/docs/messages/invalid-next-config

Expected Behavior

the build should not fail and dev command should work without any warning

Link to reproduction

it's a private repo

To Reproduce

this is how next config file looks like:

const shell = require('shelljs');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const RollbarSourcemapPlugin = require('rollbar-sourcemap-webpack-plugin');

const isDev = process.env.NODE_ENV !== 'production';

const packages = JSON.parse(
  shell.exec('npx lerna list --all --json', {
    silent: true,
  }).stdout,
);

const packageNames = packages
  .reduce((a, currentPackage) => [...a, currentPackage.name], [])
  .filter(item => item.includes('@assets'));

const withTM = require('next-transpile-modules')(packageNames);

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/signup',
        destination: '/',
        permanent: false,
      },
    ];
  },
  images: {
    disableStaticImages: true,
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
  productionBrowserSourceMaps: true,
  generateBuildId: async () => {
    if (process.env.NEXT_PUBLIC_COMMIT_HASH) {
      return process.env.NEXT_PUBLIC_COMMIT_HASH;
    }
    // return null to use default next.js build id if there is no commit hash
    return null;
  },
  assetPrefix: isDev ? 'http://localhost:3000' : '',
  webpack: (config, { dev, buildId }) => {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf)$/,
      type: 'asset/resource',
    });

    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      }),
    );

    // to upload source maps to rollbar, we follow this example as reference
    // https://github.com/thredup/rollbar-sourcemap-webpack-plugin/blob/c7569ddf99fc01041f12a3d4b2998ea0f93a8dbe/examples/next-js/next.config.js
    if (!dev) {
      // Generate a common `id` to be used when initializing Rollbar & when uploading the sourcemaps.
      // This could be any common value, as long as it is used in `_document.js` when initializing Rollbar.
      const codeVersion = JSON.stringify(buildId);

      config.plugins.push(
        new RollbarSourcemapPlugin({
          accessToken: process.env.ROLLBAR_ACCESS_TOKEN,
          version: codeVersion,
          publicPath: `${process.env.FRONTEND_ENDPOINT}/_next/`,
        }),
      );
    }

    return config;
  },
};

module.exports = withPlugins(
  [[withTM], [optimizedImages, { optimizeImagesInDev: true }]],
  nextConfig,
);

[robcaldecott]

Having the same issue. Updated to [email protected] and [email protected] and are getting similar issues. Downgrading to 12.2.2 makes the issue go away but a resolution would be good.

Here's our config:

/** @type {import('next').NextConfig} */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withSentryConfig } = require("@sentry/nextjs");

const withPlugins = require("next-compose-plugins");
const withBundleStats = require("next-plugin-bundle-stats");

require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` });

const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
const buildId = execSync(lastCommitCommand).toString().trim();

const moduleExports = {
  reactStrictMode: true,
  sentry: {
    disableServerWebpackPlugin: true,
    disableClientWebpackPlugin: true,
  },
  // fix for https://github.com/vercel/next.js/issues/18389
  // https://zegons.atlassian.net/browse/BF-1455
  async generateBuildId() {
    return buildId;
  },
  env: {
    // Inject process.env.BUILD_ID which is then added to the <body>
    BUILD_ID: buildId,
  },
  eslint: {
    dirs: [
      "components",
      "constants",
      "hooks",
      "locales",
      "pages",
      "providers",
      "utils",
    ],
  },
};

const sentryWebpackPluginOptions = {
  silent: true,
};

module.exports = withPlugins([
  withSentryConfig(moduleExports, sentryWebpackPluginOptions),
  withBundleStats({ outDir: "./bundle-stats" }),
]);

[robcaldecott]

Note it's [email protected] causing this, not the eslint update 🤷‍♂️

[realamirhe]

There are some differences from i18n config type to extra config options like nx or pwa. I believe the change in the next 12.2.3 are toward more minimal webpack config, but till we get all other packages to sync it will take some time. till then I would appreciate if next team make a discussion or an epic issue, listing all possible changes from their side, so other packages can reference and fix their work in more predictable manner.

[umararshad4]

my dev server is working but when i build it give the webpack error

[ghost]

Having the same issue. Updated to [email protected] and [email protected] and are getting similar issues. Downgrading to 12.2.2 makes the issue go away but a resolution would be good.

Here's our config:

/** @type {import('next').NextConfig} */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withSentryConfig } = require("@sentry/nextjs");

const withPlugins = require("next-compose-plugins");
const withBundleStats = require("next-plugin-bundle-stats");

require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` });

const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
const buildId = execSync(lastCommitCommand).toString().trim();

const moduleExports = {
  reactStrictMode: true,
  sentry: {
    disableServerWebpackPlugin: true,
    disableClientWebpackPlugin: true,
  },
  // fix for https://github.com/vercel/next.js/issues/18389
  // https://zegons.atlassian.net/browse/BF-1455
  async generateBuildId() {
    return buildId;
  },
  env: {
    // Inject process.env.BUILD_ID which is then added to the <body>
    BUILD_ID: buildId,
  },
  eslint: {
    dirs: [
      "components",
      "constants",
      "hooks",
      "locales",
      "pages",
      "providers",
      "utils",
    ],
  },
};

const sentryWebpackPluginOptions = {
  silent: true,
};

module.exports = withPlugins([
  withSentryConfig(moduleExports, sentryWebpackPluginOptions),
  withBundleStats({ outDir: "./bundle-stats" }),
]);

it's not working for me in any v12

[FranklysG]

Hello, I had the same problem, but I solved it when I removed these flags from next.config, because they are valid

[ghost]

i’m not even using those flags.

On Mon, 1 Aug 2022 at 12:06 AM, Franklys Guimarães @.***> wrote:

Hello, I had the same problem, but I solved it when I removed these flags from next.config, because they are valid

[image: image] https://user-images.githubusercontent.com/42286289/182040479-9f191b3d-76bb-485b-b11a-d05ccd69d4e2.png

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/39161#issuecomment-1200477021, or unsubscribe https://github.com/notifications/unsubscribe-auth/AISB4OQ3CGVWIX2CX6LNGMDVW3BT7ANCNFSM55ACCBIA . You are receiving this because you authored the thread.Message ID: @.***>

[ghost]

instead, i’m getting errors for those flags which i’m not using.

On Mon, 1 Aug 2022 at 12:06 AM, Franklys Guimarães @.***> wrote:

Hello, I had the same problem, but I solved it when I removed these flags from next.config, because they are valid

[image: image] https://user-images.githubusercontent.com/42286289/182040479-9f191b3d-76bb-485b-b11a-d05ccd69d4e2.png

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/39161#issuecomment-1200477021, or unsubscribe https://github.com/notifications/unsubscribe-auth/AISB4OQ3CGVWIX2CX6LNGMDVW3BT7ANCNFSM55ACCBIA . You are receiving this because you authored the thread.Message ID: @.***>

[umararshad4]

instead, i’m getting errors for those flags which i’m not using. … On Mon, 1 Aug 2022 at 12:06 AM, Franklys Guimarães @.> wrote: Hello, I had the same problem, but I solved it when I removed these flags from next.config, because they are valid [image: image] https://user-images.githubusercontent.com/42286289/182040479-9f191b3d-76bb-485b-b11a-d05ccd69d4e2.png — Reply to this email directly, view it on GitHub <#39161 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AISB4OQ3CGVWIX2CX6LNGMDVW3BT7ANCNFSM55ACCBIA . You are receiving this because you authored the thread.Message ID: @.>

if you are using window you need to download some c++ binaries files

[balazsorban44]

The warnings should guide you on configuring Next.js correctly. In this case:

{
  "instancePath": "/assetPrefix",
  "schemaPath": "#/properties/assetPrefix/minLength",
  "keyword": "minLength",
  "params": {
    "limit": 1
  },
  "message": "must NOT have fewer than 1 characters"
},

is easy to fix, your assetPrefix is expected to have a minimum length of 1 character, but you defined it as an empty string. Changing the fallback to undefined resolves that warning.

 {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "optimizedImagesInDev"
    },
    "message": "must NOT have additional properties"
  }

comes from next-optimized-images that is adding opzimizedImagesInDev to the nextConfig: https://github.com/cyrilwanner/next-optimized-images/blob/master/lib/config.js#L10-L29

It can potentially be dangerous for plugins to extend the Next.js config that it does not recognize as this might lead to unexpected behavior. The plugin should not add its own config options to nextConfig.

As far as I can tell, the rest of the warnings are related to next-compose-plugins. I'll check what's going on. (Related issue: https://github.com/cyrilwanner/next-compose-plugins/issues/59)

next config file is throwing error

These errors should not stop the build process though, so if that happens, you should look for other error messages in the console that should tell you what's the issue. If you need further assistance, I recommend attaching a full reproduction so we can investigate.

[ghost]

Hello, I had the same problem, but I solved it when I removed these flags from next.config, because they are valid

how did you solved it, what changes you made it in the config file ?

[ghost]

not sure but i'm not able to use any plugin next-compose-plugins, next-optimized-images and next-transpile-modules;

only using next config works fine

[robcaldecott]

It would be great to get an update on this from the NextJS team. We are reluctant to upgrade to 12.2.3 because of the noise generated by this when we lint or build.

[balazsorban44]

I could verify an issue with the following reproduction:

// next.config.js
module.exports = (_, c) => c.defaultConfig

Ideally, the packages wouldn't need to merge with the default config (example: https://github.com/cyrilwanner/next-compose-plugins/blob/d81db51821f92a8872930ed630eb064e3fb82e04/src/index.js#L12) as we already do that internally after validation, but we should probably not fail the validation by the default configuration either. I opened a PR and I am working on a fix.

[wiredmatt]

This shows no warnings for me:

import withPWA from 'next-pwa'
import runtimeCaching from 'next-pwa/cache.js'

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [/middleware-manifest.json$/],
    disable: process.env.NODE_ENV === 'development'
  }
}

const buildConfig = _phase => {
  const plugins = [withPWA]
  const config = plugins.reduce((acc, next) => next(acc), {
    ...nextConfig
  })
  return config
}

export default buildConfig

I'm omitting the defaultConfig argument (if included it showed the warnings), not sure if that's fine.

[Shednandez]

then fixed it

[hafizasadabbas]

Facing the same issue when using i18n with next.config.js

warn - Invalid next.config.js options detected: [ { "instancePath": "/i18n", "schemaPath": "#/properties/i18n/additionalProperties", "keyword": "additionalProperties", "params": { "additionalProperty": "localePath" }, "message": "must NOT have additional properties" }, { "instancePath": "/i18n", "schemaPath": "#/properties/i18n/additionalProperties", "keyword": "additionalProperties", "params": { "additionalProperty": "localeDir" }, "message": "must NOT have additional properties" } ]

[huksley]

This issue is either resolved in 12.2.4 or because of populating your resulting config with defaultConfig.

DO NOT DO THIS: module.exports = (phase, { defaultConfig }) => ({ ...defaultConfig })

https://nextjs.org/docs/api-reference/next.config.js/introduction

[robcaldecott]

My issue was with next-compose-plugins - I have now removed this from my config and am composing the plugins I need manually. This fixes the issue for me.

https://github.com/cyrilwanner/next-compose-plugins/issues/59

[Marcelx8]

I don't see the warnings after upgrading to version 12.2.2, but similar warnings are shown on 12.2.3 and up

[JunlinPan-Crypto]

https://github.com/i18next/next-i18next/issues/1920

[YasharSL]

Facing the same issue with Next 12.2.5 and next-pwa 5.4.6 here's my Next config:

import withPWA from "next-pwa";

export default withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    disable: process.env.NODE_ENV === "development",
  },
  images: {
    domains: ['api.<domain>.com'],
  },
});

and here is the error I get:

warn  - Invalid next.config.js options detected: 
  - The root value has an unexpected property, pwa, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).

See more info here: https://nextjs.org/docs/messages/invalid-next-config
> [PWA] PWA support is disabled
> [PWA] PWA support is disabled

Using next 12.2.2 fixed the problem for me as well

[Shednandez]

Fix issues

[levifry]

For anyone looking for a full next.config.js solution that removes the warnings, here's what I use:

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache.js')
const path = require('path')

const redirects = async () => {
  return [
    {
      source: '/_backups',
      destination: '/',
      permanent: true,
    },
  ]
}

const rewrites = async () => {
  return [
    {
      source: '/rewrite',
      destination: '/',
    },
  ]
}

const headers = async () => {
  return [
    {
      source: '/:path*',
      headers: [
        {
          key: 'X-Content-Type-Options',
          value: 'nosniff'
        },
        {
          key: 'X-Frame-Options',
          value: 'SAMEORIGIN'
        },
        {
          key: 'X-XSS-Protection',
          value: '1; mode=block'
        },
        {
          key: 'Strict-Transport-Security',
          value: 'max-age=63072000; includeSubDomains; preload'
        },
        {
          key: 'X-DNS-Prefetch-Control',
          value: 'on'
        }
      ],
    },
  ]
}


const nextConfig = {
  reactStrictMode: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
  swcMinify: true,
  images: {
    domains: ['localhost', 'image.shutterstock.com'],
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/_styles')],
  },
  webpack: (config) => {
    // find the built-in loader
    const imageLoaderRule = config.module.rules.find(
      (rule) => rule.loader === 'next-image-loader'
    )
    // make the loader ignore *.inline files
    imageLoaderRule.exclude = /\.inline\.(png|jpg|svg)$/i
    
    // add a new URL loader for *.inline files
    config.module.rules.push({
      test: /\.inline\.(png|jpg|gif)$/i,
      use: [
        {
          loader: 'url-loader'
        }
      ]
    })
    return config
  },
  pwa: {
    dest: 'public',
    swSrc: './service-worker.js',
    register: true,
    runtimeCaching,
    mode: 'production',
    reloadOnOnline: true,
    cacheOnFrontEndNav: true,
    disable: process.env.NODE_ENV === 'development',
  }
}

module.exports = buildConfig = _phase => {
  const plugins = [withPWA]
  const config = plugins.reduce((acc, plugin) => plugin(acc), {
    ...nextConfig, headers, rewrites, redirects
  })
  return config
}

[jonasmarco]

For anyone looking for a full next.config.js solution that removes the warnings, here's what I use:

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache.js')
const path = require('path')

const redirects = async () => {
  return [
    {
      source: '/_backups',
      destination: '/',
      permanent: true,
    },
  ]
}

const rewrites = async () => {
  return [
    {
      source: '/rewrite',
      destination: '/',
    },
  ]
}

const headers = async () => {
  return [
    {
      source: '/:path*',
      headers: [
        {
          key: 'X-Content-Type-Options',
          value: 'nosniff'
        },
        {
          key: 'X-Frame-Options',
          value: 'SAMEORIGIN'
        },
        {
          key: 'X-XSS-Protection',
          value: '1; mode=block'
        },
        {
          key: 'Strict-Transport-Security',
          value: 'max-age=63072000; includeSubDomains; preload'
        },
        {
          key: 'X-DNS-Prefetch-Control',
          value: 'on'
        }
      ],
    },
  ]
}


const nextConfig = {
  reactStrictMode: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
  swcMinify: true,
  images: {
    domains: ['localhost', 'image.shutterstock.com'],
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/_styles')],
  },
  webpack: (config) => {
    // find the built-in loader
    const imageLoaderRule = config.module.rules.find(
      (rule) => rule.loader === 'next-image-loader'
    )
    // make the loader ignore *.inline files
    imageLoaderRule.exclude = /\.inline\.(png|jpg|svg)$/i
    
    // add a new URL loader for *.inline files
    config.module.rules.push({
      test: /\.inline\.(png|jpg|gif)$/i,
      use: [
        {
          loader: 'url-loader'
        }
      ]
    })
    return config
  },
  pwa: {
    dest: 'public',
    swSrc: './service-worker.js',
    register: true,
    runtimeCaching,
    mode: 'production',
    reloadOnOnline: true,
    cacheOnFrontEndNav: true,
    disable: process.env.NODE_ENV === 'development',
  }
}

module.exports = buildConfig = _phase => {
  const plugins = [withPWA]
  const config = plugins.reduce((acc, plugin) => plugin(acc), {
    ...nextConfig, headers, rewrites, redirects
  })
  return config
}

what about buildConfig, where does it come from, i'ts complete? (in your solution)

[levifry]

what about buildConfig, where does it come from, i'ts complete? (in your solution) @jonasmarco

It's just the name of the exported function. You can name it whatever you want. I branched mine off @system32uwu's solution above and kept the naming convention

[brenopolanski]

My next.config.js solution that removes the warnings:

/* eslint-disable @typescript-eslint/no-var-requires */
const CircularDependencyPlugin = require('circular-dependency-plugin')
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
})

const plugins = []

if (process.env.ANALYZE === 'true') {
  // only load dependency if env `ANALYZE` was set
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: true,
  })

  plugins.push(withBundleAnalyzer)
}

plugins.push(withPWA)

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      new CircularDependencyPlugin({
        exclude: /a\.js|node_modules/,
        include: /src/,
        failOnError: true,
        allowAsyncCycles: false,
        cwd: process.cwd(),
      }),
    )

    return config
  },
}

module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig)

[enkhee]

This bug is also present in [email protected]

[Shednandez]

fix bugs

[wataru358]

When using next-compose-plugin,

https://github.com/cyrilwanner/next-compose-plugins/blob/master/src/index.js#L10

this seems to merge with defaultConfig from next.js

https://github.com/vercel/next.js/blob/bf8ee1edb4f6b134ada58e2ea65e33670c0c08ea/packages/next/server/config-shared.ts#L487

For me, I got a warning for following props: webpackDevMiddleware configOrigin target webpack5

Does removing those from defaultConfig solve this issue? It is next side merging this into user config, and next's config validate is giving us warning.

[meherhowji]

Faced similar issue with 12.3.1, however I was just using pwa and next-compose-plugin, so removed next-composed-plugin followed the rest of the warning/requirements from the terminal and updated the next config. And it worked.

[Silverium]

As mentioned by some people before, remove "next-compose-plugin" and some conflicting plugins like "next-pwa" helped me. This is a nice code replacement for "next-compose-plugin".

As a oneliner for "next.config.js":

module.exports = () => [plugin1, plugin2withConfig(plugin2Config), pluginN].reduce((config, plugin) => plugin(config), nextConfig);

And a more readable example:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
   ...
};

module.exports = () => {
	const plugins = [plugin1, plugin2withConfig(plugin2Config), pluginN];

	return plugins.reduce((config, plugin) => plugin(config), nextConfig);
};

[anasElshereif]

i think it's an issue related to withPlugins packege