next-pwa: Invalid next.config.js with next-pwa

Summary

Since the latest version of Next.js, next.config.js doesn’t support any more invalid properties. After running npm run dev, here’s what we got:

warn  - Invalid next.config.js options detected: 
[
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "pwa"
    },
    "message": "must NOT have additional properties"
  }
] 
See more info here: https://nextjs.org/docs/messages/invalid-next-config

Related Next.js issue: https://github.com/vercel/next.js/issues/38909

Versions

next-pwa: 5.5.4
next: 12.2.3

How To Reproduce

Steps to reproduce the behavior: Basically install next-pwa in a Next.js project (latest Next.js version) and configure it in next.config.js with the pwa property.

Expected Behaviors

Maybe, we should start using next-pwa differently? No more pwa property inside next.config.js?

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 30
Comments: 19 (2 by maintainers)

Commits related to this issue

🔧 Fix invalid next.config.js https://github.com/shadowwalker/next-pwa/issues/367#issuecomment-1194057483 — committed to echo-webkom/echo-web by bakseter 2 years ago
🔧 Fix invalid next.config.js https://github.com/shadowwalker/next-pwa/issues/367#issuecomment-1194057483 — committed to echo-webkom/echo-web by bakseter 2 years ago

Most upvoted comments

@gamadv @darklight9811 Check the readme again. The way to include the config is slightly changed in the new version. For me it looks like this now and works fine.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
};

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
});

module.exports = withPWA(nextConfig);

Check https://github.com/shadowwalker/next-pwa#step-1-withpwa

+54

saifbechan on Aug 24, 2022

@gamadv @darklight9811 Check the readme again. The way to include the config is slightly changed in the new version. For me it looks like this now and works fine.
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
};

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
});

module.exports = withPWA(nextConfig);
Check https://github.com/shadowwalker/next-pwa#step-1-withpwa

This is the one! Thank you so much!

+11

levifry on Sep 12, 2022

Deleting the pwa key is not working for me but I’m also using withPWA to wrap withTM as follows, maybe that has something to do with it. In any case, deleting the key in my context means that the PWA outputs aren’t created in the public directory.

const config = withPWA(
  withTM({
    publicRuntimeConfig: {
      version,
    },
    pwa: {
      dest: "public",
      runtimeCaching,
    },
    reactStrictMode: true,
  })
);

kaaloo on Jul 26, 2022

@gamadv @darklight9811 Check the readme again. The way to include the config is slightly changed in the new version. For me it looks like this now and works fine.
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
};

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
});

module.exports = withPWA(nextConfig);
Check https://github.com/shadowwalker/next-pwa#step-1-withpwa

This worked for me! Thank you

marcelo-albuquerque on Aug 31, 2022

Meanwhile one could always delete the PWA key from the config return as @DavidSint suggested in his #368. This has fixed the issue for me. Thanks @DavidSint

const pwaConfig = withPWA({
...
});

delete pwaConfig.pwa;

module.exports = pwaConfig;

olavoparno on Jul 25, 2022

@saifbechan I wasnt using the new version, I updated afterwards and made the proper changes and it worked

darklight9811 on Aug 24, 2022

Actually still throwing that error message for me

next@12.2.3 next-pwa@5.5.5

I’m using next-compose-plugins and exporting like this:
module.exports = composer(
	[
		withPreact,
		withPWA,
	],
	nextConfig,
)

i don’t use next-compose-plugins again, but this is work for me

const withPWA = require('next-pwa');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
  pwa: {
    dest: 'public',
    // disabled has bug, will fix on next version
    disable: process.env.NODE_ENV === 'development',
    register: true,
  },
};

module.exports = () => {
  const plugins = [withPWA];
  const config = plugins.reduce((acc, next) => next(acc), {
    ...nextConfig,
  });
  return config;
};

xhttp-res on Aug 3, 2022

0.816 > Build error occurred
0.816 TypeError: withPWA is not a function

wethinkagile on Sep 20, 2023

This seems to have been introduced in next 12.2.3, I do not see the issue in 12.2.2

DavidSint on Jul 23, 2022