next-pwa is breaking the other things from next.config.js

[dhavalveera]

Hello,

below is my next.config.js file:

/**
 * @type {import('next').NextConfig}
 */

const removeImports = require('next-remove-imports')();

const withTM = require('next-transpile-modules')(['friendly-challenge']);

// next-pwa
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

const nextConfig = removeImports(
  withTM(
    withPWA({
      reactStrictMode: true,

      compiler: {
        styledComponents: true,
        removeConsole: process.env.NODE_ENV === 'development' ? false : true,
      },

      swcMinify: true,

      env: {
        // few env variables
       // Server URL
        SERVER_URL:
          process.env.NODE_ENV === 'development'
            ? 'http://localhost:3000'
            : 'https://dhavalvira.com',
      },

      pwa: {
        dest: 'public',
        register: true,
        skipWaiting: true,
        runtimeCaching,
        scope: '/',
        maximumFileSizeToCacheInBytes: 3000000,
        disable: process.env.NODE_ENV === 'development',
      },

      webpack(config) {
        config.module.rules.push({
          test: /\.svg$/i,
          issuer: { and: [/\.(js|ts|md)x?$/] },
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                svgoConfig: { plugins: [{ removeViewBox: false }] },
              },
            },
          ],
        });
        return config;
      },
    })
  )
);

module.exports = nextConfig;

when I'm running the Nextjs app using npm run dev wherever I'm using process.env.SERVER_URL => this env variable is returning undefined, and due to this my page breaking and if I remove the withPWA then everything is working fine.

please help me

[BjoernRave]

I experience the same problem with another library, called next-translate, which also wraps the config with a function. The linbrary doesnt worky properly anymore with 5.6.0

Edit: I just found out that they changed the way the function works in a minor version... Now you need to use it like this:

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV !== 'production',
  runtimeCaching,
})

[NavidNourani]

I think you should use NEXT_PUBLIC_SERVER_URL instead of SERVER_URL