Invalid next.config.js with next-pwa

[theoludwig]

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?

[victand98]

I have the same issue :(

[DavidSint]

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

[fabb]

I guess the lib could keep using the pwa config key as input, but would need to remove it from the return value so it dies not reach next.js.

[DavidSint]

@fabb I've created that in a PR by simply shifting the returned config into a variable pwaNextConfig, and deleting the pwa field before returning pwaNextConfig. I have briefly tested it my own project (by doing the same thing in my node_modules/next-pwa folder) but I have not extensively tested the PR.

[rahXephonz]

Got with same issue after upgrading my next into latest version

[sanghunlee-711]

same error is here :( I made new project today with vercel-progressive-web-app and got this error too

[olavoparno]

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;

[kaaloo]

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,
  })
);

[d-strygwyr]

how to new config with this release #368 ?

[darklight9811]

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,
)

[d-strygwyr]

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;
};

[gamadv]

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;
};

For this I have that warn issue: `warn - Invalid next.config.js options detected:

• The root value must be an object but it was a function.

See more info here: https://nextjs.org/docs/messages/invalid-next-config warn - Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration`

Do you know what happened?

[darklight9811]

@hafidzamr this approach makes this warning appear every hotreload:

warn  - GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

[saifbechan]

@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

[darklight9811]

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

[marcelo-albuquerque]

@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

[levifry]

@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!

[wethinkagile]

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

[ps011]

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

I was having the same issue, upgrade to 5.6.0.

[H4LV3D]

You can try this if you are using ES6 syntax. Hope it helps someone.

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

import { default as withPWA } from "next-pwa";

const withPWAConfig = withPWA({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
  register: true,
});

export default withPWAConfig(nextConfig);