I was trying to deploy a turborepo PWA. It works perfectly in development however on building the files I get this error I am using
- Next.js 13.4.4
- turbo 1.9.7
- next-pwa 5.6.0
pwa-experimental:build: - info Generating static pages (3/4)
pwa-experimental:build: - info Generating static pages (4/4)
pwa-experimental:build:
pwa-experimental:build: > Export encountered errors on following paths:
pwa-experimental:build: /_error: /404
pwa-experimental:build: /_error: /500
pwa-experimental:build: /test-pages
pwa-experimental:build: error Command failed with exit code 1.
pwa-experimental:build: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
pwa-experimental:build: ERROR: command finished with error: command (/home/siddarth/Desktop/Vivly-monorepo/vivly/apps/--experimental-pwa) yarn run build exited (1)
command (/home/siddarth/Desktop/Vivly-monorepo/vivly/apps/--experimental-pwa) yarn run build exited (1)
Tasks: 0 successful, 2 total
Cached: 0 cached, 2 total
Time: 7.468s
Failed: pwa-experimental#build
ERROR run failed: command exited (1)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This does not happen if I try to build the file in an external folder with the same configurations , except for removing the local packages
My Next.Config.js is as follows
const path = require("path");
const withPWAInit = require("next-pwa");
/** @type {import('next-pwa').PWAConfig} */
const withPWA = withPWAInit({
dest: "public",
// Solution: https://github.com/shadowwalker/next-pwa/issues/424#issuecomment-1399683017
buildExcludes: ["app-build-manifest.json"],
});
const generateAppDirEntry = (entry) => {
const packagePath = require.resolve('next-pwa');
const packageDirectory = path.dirname(packagePath);
const registerJs = path.join(packageDirectory, "register.js");
return entry().then((entries) => {
// Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427
if (entries["main-app"] && !entries["main-app"].includes(registerJs)) {
if (Array.isArray(entries["main-app"])) {
entries["main-app"].unshift(registerJs);
} else if (typeof entries["main-app"] === "string") {
entries["main-app"] = [registerJs, entries["main-app"]];
}
}
return entries;
});
};
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
const entry = generateAppDirEntry(config.entry);
config.entry = () => entry;
return config;
},
};
module.exports = withPWA(nextConfig);
I have tried looking for a solution on github and stack. The above errors occur due to some undefined context in the build files
Error occurred prerendering page "/test-pages". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
There seems to be some information about this error on github which I have tried to implement, however it doesn't work for me. The custom next.config.js is for making next-pwa work with the app router, I am not sure if that would be causing the problem however I have not used context anywhere in the application if anyone was curious.