Breaks with next-pwa

[LucasMallmann]

Hey there! I'm trying to setup next-images along with next-pwa, but for some reason whenever I try to put these two plugins together, the next-pwa breaks due to next-images.

I'm using next-compose-plugins to put then together, but I really have no idea why this is happening.

My implementation

const withImageLoader = require('./webpack/image-loader');
const withCSS = require('@zeit/next-css');
const withPWA = require('next-pwa');
const withImages = require('next-images');

const withPlugins = require('next-compose-plugins');

// ... there is some code here

const { getBasePath } = require('./utils/path');

const assetPrefix = getBasePath();

// Plugins loader
const cssLoader = withCSS(withImageLoader({ env: exportEnvs }));

const imagesLoader = withImages({
  assetPrefix,
});

const pwaLoader = withPWA({
  target: 'serverless',
  poweredByHeader: false,
  assetPrefix,

  pwa: {
    dest: 'public',
    subdomainPrefix: assetPrefix,
    sourcemap: false,
  },
});

// Next configuration
const nextConfig = {
  assetPrefix,
  publicRuntimeConfig: {
    basePath: assetPrefix,
  },
};

module.exports = withPlugins([
  [cssLoader],
  [pwaLoader],
  [imagesLoader],
  nextConfig,
]);

[LucasMallmann]

Well, actually I managed to resolve it. It was a configuration I was doing wrong, but now it's working fine :D

[arefaslani]

@LucasMallmann Great! To be honest, I'm really busy these days and any help is welcome. But I'm happy that your problem is resolved :)

[agustif]

Well, actually I managed to resolve it. It was a configuration I was doing wrong, but now it's working fine :D

Do you mind sharing your working config? Thanks!

[LucasMallmann]

@arefaslani no problem! Thanks for the attention :D

[LucasMallmann]

@agustif sure, no problem!

const withImageLoader = require('./webpack/image-loader');
const withCSS = require('@zeit/next-css');
const withPWA = require('next-pwa');
const withImages = require('next-images');

const envs = require('dotenv').config();

const withPlugins = require('next-compose-plugins');

const { getBasePath } = require('./utils/path');
const generateManifestFile = require('./factories/manifest');

// Generate the manifest.json
generateManifestFile()
  .then(() => console.log('\n> [Manifest] manifest.json generated succesfully'))
  .catch((err) =>
    console.error(
      '> Error: There was an error generating the manifest.json file',
      err.message
    )
  );

const exportEnvs = {};

Object.keys(envs.parsed).forEach((key) => {
  if (key === 'NODE_ENV') {
    return;
  }

  exportEnvs[key] = envs.parsed[key];
});

const assetPrefix = getBasePath();

// Next configuration
const nextConfig = {
  assetPrefix,
  publicRuntimeConfig: {
    basePath: assetPrefix,
  },
  env: exportEnvs,
};

module.exports = withPlugins([
  [withCSS],
  [
    withImages,
    {
      assetPrefix,
    },
  ],
  [
    withPWA,
    {
      target: 'serverless',
      poweredByHeader: false,
      assetPrefix,

      pwa: {
        dest: 'public',
        subdomainPrefix: assetPrefix,
        sourcemap: false,
      },
    },
  ],
  nextConfig,
]);

The problem was that I'm using next-compose-plugins, but I guess I was not writing the configs right, so that's why it was causing me trouble!