Unable to build a working next js app when next-pwa is added

[rmrbytes]

I have been unsuccessful in building the app after the next-pwa integration.

The package.json is as below:

The next.config.json is:

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
})

const nextConfig = withPWA({
  reactStrictMode: false,
  swcMinify: true,
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback, 
      fs: false, 
    };

    return config;
  },
})

module.exports = nextConfig

The errors (multiple) I receive on npm run build is as below:

It seems that something fundamentally I am missing out. Can someone please point me to where I am going wrong. Thanks

[rmrbytes]

I tried adding all the build errors in the config as false and the build goes through.

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
})

const nextConfig = withPWA({
  reactStrictMode: false,
  swcMinify: true,
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback, 
      fs: false, 
      child_process: false,
      worker_threads: false,
      module: false,
      esbuild: false,
      "@swc/core": false,
      "uglify-js": false
    };

    return config;
  },
})

module.exports = nextConfig

I am not sure if this is what is to be done ... and whether this will break something else

[rmrbytes]

What seems to have worked is:

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true
})

const nextConfig = withPWA({
  swcMinify: true,
  reactStrictMode: true,
    webpack: (config) => {
        config.resolve.fallback = { 
          fs: false,
          module: false,
          child_process: false,
          worker_threads: false,
          "uglify-js": false,
          "@swc/core": false,
          esbuild: false,
          inspector: false
        };
        return config;
    },
    output: "standalone",
 })

module.exports = nextConfig

The above let the npm run build to be error-free. However it failed when it was pushed to Vercel.

Additonally, I had to add webpack to the package.json to get it working on Vercel.

I am not sure if all the above "jugglery" will break something some where. If so, I will share in this discussion.

[rmrbytes]

As mentioned that I would give a feedback. The result of the above is that it is throwing up all sorts of javascript errors which is difficult to debug because of the chunks creations etc. In short, this is not working for me.

It seems obvious that it works for most folks. It will be helpful for me if someone could suggest what I am fundamentally doing wrong. Thanks