It is not possible to transform Next.js into a Progressive Web App (P

Can someone assist me with PWA implementation?

I tried running npm run build, but it was unsuccessful.

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbaacbface0abbfa2a3b98dfde3fce3fd">[email protected]</a> build
> next build

 ⚠ Invalid next.config.mjs options detected: 
 ⚠     Unrecognized key(s) in object: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
  ▲ Next.js 14.2.3

   Creating an optimized production build ...
> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/tsubasa/Documents/development/hackathon/wara-front/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/tsubasa/Documents/development/hackathon/wara-front/.next/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
Failed to compile.

Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?


> Build failed because of webpack errors

It seems like modifying next.config.mjs is not an option.

typescriptnext.jsprogressive-web-apps

Answer №1

If your next.config.js file has a ".mjs" extension, consider renaming it.

/next.config.js
/** @type {import('next').NextConfig} */
const prod = process.env.NODE_ENV === "production";
const withPWA = require("next-pwa")({
  dest: "public",
  disable: prod ? false : true,
});
module.exports = withPWA({
  images: {
    remotePatterns: [ 
      { hostname: `${process.env.NEXT_PUBLIC_CANONICAL}` },
    ],
  },
  async rewrites() {
    return [
      {
        source: "....",
        destination: "....",
      },
    ];
  },
});

Additionally, verify the version of the next-pwa package. The version I am currently using is:

"next-pwa": "^5.6.0",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assign a specific value to each object

Receiving data from the backend in a straightforward manner: this.archiveService.getRooms(team).subscribe( res => { this.form = res; this.form.forEach(el => { el.reservation.slice(-6).match(/.{1,2}/g).join('/'); }); }, ...

javascriptangulartypescript

How can I exclude *.d.ts files from tslint checking?

Recently, I decided to integrate tslint into my workflow. Following the installation steps, I used the command: npm install tslint tslint-config-ms-recommended --save-dev My configuration file tslint.json now looks like this: { "extends": "tslint-co ...

typescripttslint

Retrieve information using the useEffect hook on a server-side rendered webpage

I am currently working on a project using React JS and Next JS. The page is dynamic, utilizing getStaticPaths and getStaticProps to fetch most data on the server side for rendering. However, there are certain pieces of data that require a token stored in l ...

javascriptreactjsnext.jsdynamic-routinggetstaticprops

How to resolve the issue of "Fixing 'Unhandled Runtime Error TypeError: event is undefined'"

Today I encountered this error: Unhandled Runtime Error TypeError: event is undefined and couldn't find a solution online Here's the code snippet: import { ethers } from 'ethers' import { create as ipfsHttpClient } from 'ipfs-h ...

javascriptnext.jsweb3js

Failed to import due to an error from the downloaded dependency

I'm encountering an import error in the @react-three module of my downloaded package. ./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js Attempted import error: 'webgl-sdf-generator' does not cont ...

reactjstypescriptreact-three-fiberreact-three-drei

The data structure '{ variableName: string; }' cannot be directly assigned to a variable of type 'string'

When I see this error, it seems to make perfect sense based on what I am reading. However, the reason why I am getting it is still unclear to me. In the following example, myOtherVariable is a string and variableName should be too... Or at least that&apos ...

javascriptreactjstypescript

Utilizing Bootstrap 4 cards in conjunction with a responsive next/image component

<div className="row align-items-center justify-content-center"> <div className="col-md-3 mt-3"> <div className="card bg-light"> <div className="card-img-top"> <N ...

cssreactjsbootstrap-4next.js

What is the significance of including parameter names in Typescript function type signatures?

Just diving into typescript for the first time, so bear with me... I decided to create a simple filter function for a container I had created class Container<T> { filter(predicate: (T) => boolean): Container<T> { for(const elem ...

typescript

While deploying: Error 500 - The installation of dependencies was unsuccessful due to a request timeout

I'm encountering an issue while attempting to deploy my bot to Azure. Here's the command I used: az bot publish --name --proj-name "" --resource-group --code-dir "/path/to/my-app" --verbose --version v4 Unfortunately, it is timing out durin ...

typescriptnpmdeploymentazure-web-app-servicebotframework

Error in TypeScript when using Vue/Nuxt.js: The property 'latitude' is not found in the type '(() => any) | ComputedOptions<any>'

As a newcomer to Vue.js, I am currently utilizing it with Typescript on a Nuxt.js (v2.15.8) application. The code snippet provided below is functioning correctly: export default Vue.extend({ name: 'MyComponent', ...

typescriptvue.jsvuejs2vue-componentnuxt.js

Discovering the import path of Node modules in ReactAlgorithm for determining the import path of

Software Development In my current project, I am utilizing Typescript along with React. To enhance the application, I integrated react-bootstrap-date-picker by executing yarn install react-bootstrap-date-picker. Unfortunately, there is no clear instruct ...

javascriptreactjstypescript

Tips for leveraging the functions service in Next.js for better code reusability

I am just starting to learn Next.js and I have a preference for organizing my API functions in a separate folder called services. I attempted to implement some code based on this topic but unfortunately, it did not work as expected. It seems like my api fu ...

typescriptnext.js

What is the process for providing personalized qualifications?

Hello, I have set up my NextAuth configuration as shown below: import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" export default NextAuth({ providers: [ CredentialsProvider({ ...

reactjsnext.jsnext-auth

limiting the number of HTTP requests within a JavaScript forEach loop

In my current coding situation, I am facing an issue where the HTTP requests are being made simultaneously within a forEach loop. This leads to all the requests firing off at once. const main = async () => { items.forEach(async (i: Item) => ...

javascripttypescriptasynchronous

"webpack" compared to "webpack --watch" produces varying results in terms of output

My project is built on top of this setup: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html Running webpack compiles a bundle that functions correctly in the browser. However, running webpack --watch to recompile on file changes resul ...

javascripttypescriptwebpack

Utilizing Next.js on Vercel with Sentry and opting out of source maps in the production environment

Currently setting up a Next.js application on Vercel with Sentry configuration thanks to the @sentry/next.js module. You can find an example repo here - https://github.com/voronianski/test-next-sentry-app This setup is based on the official example from N ...

javascriptnext.jssentrysource-mapsvercel

What is the process of using observables in Angular to retrieve a number or variable?

While working on an angular service that calls an API and processes a large amount of data, I encountered an issue. I was trying to count the occurrences of each type in the data and send back that count along with the data itself. However, I found that wh ...

javascriptangulartypescriptserviceobservable

What is the function return type in a NextJS function?

In my project using NextJS 13, I've come across a layout.tsx file and found the following code snippet: export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <head /> <body&g ...

typescriptnext.js

What is the best way to verify the presence of a value in an SQL column?

I need to check if a value exists in a column. If the value already exists, I do not want to insert it into the table. However, if it does not exist, then I want to add new data. Unfortunately, my attempted solution hasn't been successful. You can fi ...

javascriptmysqlnode.jstypescript

Is setting cache: 'no-store' in a fetch request enough to mimic client-side rendering behavior in Next.js?

Currently, I am working with Next.js and utilizing the fetch method to retrieve data: const res = await fetch(`${process.env.url}/test`, { cache: 'no-store', }) My understanding is that specifying cache: 'no-store' will trigger a fre ...

javascriptnode.jsreactjsnext.js