Runtime Caching fails when Next Config is ES6 Module

[absalomedia]

Summary

Ported an existing NextJS PWA app into T3 (create-t3-app) and the runtimeCaching call breaks builds. Only key difference is T3 runs a ES6 module form of next.config

Versions

• next-pwa: 5.5.5
• next: @latest

How To Reproduce

Steps to reproduce the behavior:

1. Download & build basic create-t3-app with full yarn install
2. Add following code to next.config.mjs

import withPWA from 'next-pwa' import runtimeCaching from 'next-pwa/cache'

const bundlePWA = withPWA({ dest: "public", register: true, skipWaiting: true, runtimeCaching, disable: process.env.NODE_ENV === 'development', })

/**

• Don't be scared of the generics here.
• All they do is to give us autocompletion when using this.
• @template {import('next').NextConfig} T
• @param {T} config - A generic parameter that flows through to the return type
• @constraint {{import('next').NextConfig}} */

function defineNextConfig(config) { return bundlePWA(config); }

4. Save next.config.mjs
5. Run yarn build to see error

Expected Behaviors

runtimeCaching should work when NextJS config is a ES6 Module

[foojiwara]

A temporary workaround would be is to use one of these kinds of imports

import runtimeCaching from "next-pwa/cache.js";
import * as runtimeCaching from "next-pwa/cache.js";
import { default as runtimeCaching } from "next-pwa/cache.js";

I think it is caused by webpack not being able to tell if it is a js file or a directory.

Based on the error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '${workspaceDir}/node_modules/next-pwa/cache' imported from ${workspaceDir}/next.config.mjs

[absalomedia]

Now getting a new error @jaycedotbin on build

`info - Skipping linting info - Checking validity of types

[PWA] Compile client (static) [PWA] Auto register service worker with: ../node_modules/next-pwa/register.js [PWA] Service worker: ../public/sw.js [PWA] url: /sw.js [PWA] scope: / [PWA] Inject manifest in ../service-worker.js [PWA] Compile server [PWA] Compile server info - Creating an optimized production build
Failed to compile.

Please check your InjectManifest plugin configuration: [WebpackInjectManifest] 'runtimeCaching' property is not expected to be here. Did you mean property 'excludeChunks'?

Cannot read properties of undefined (reading 'source')

Build failed because of webpack errors`

[foojiwara]

Hmm, I am not getting enough information on the error. I think there is a possibility there is something wrong with your configuration or your version of next-pwa is not up to date.

Try looking at my next.config.mjs as a reference and make sure that next and next-pwa is updated. Currently my version of next is next@12.3.0 and my version of next-pwa is next-pwa@5.6.0 and my build works so maybe try updating your packages.

Here is my next.config.mjs configuration as a reference, maybe you can find something here:

import withBundleAnalyzer from "@next/bundle-analyzer";
import nextPWA from "next-pwa";
import runtimeCaching from "next-pwa/cache.js";

const withPWA = nextPWA({
    dest: "public",
    runtimeCaching,
    disable: process.env.NODE_ENV === "development",
});

/**
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(config) {
    return config;
}

const nextConfig = defineNextConfig({
    reactStrictMode: true,
    images: {
        domains: [
            "lh3.googleusercontent.com",
            "images.unsplash.com",
            "platform-lookaside.fbsbx.com",
        ],
    },
});

export default withBundleAnalyzer({
    enabled: process.env.ANALYZE === "true",
})(withPWA(nextConfig));