When trying to implement appDir and withPWA in next.config.js, an error has been encountered

My next.config.js is set up with next-pwa and an experimental app feature included.

const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development'
  },
  experimental: {
    appDir: true
  },
});

I encountered the following error: Error: > The app

 directory is marked as experimental. To enable, add
appDir: true to yournext.config.js under theexperimental
 section. For more information, visit https://nextjs.org/docs/messages/experimental-app-dir-config

I tried this configuration in a newly created project and verified that it should work properly.

javascriptnext.js

Answer №1

I ran into some issues trying to get it up and running due to compiler errors in the PWA package (it seems like it doesn't support v13 yet). The main problem was that you had defined experimental in the PWA config instead of in the next.config.js,

const withPWA = require("next-pwa")({
  pwa: {
    dest: "public",
    disable: process.env.NODE_ENV === "development",
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = withPWA({
  experimental: {
    appDir: true,
  },
});

module.exports = nextConfig;

If you're interested, here's a helpful GitHub issue link to keep track of: https://github.com/vercel/next.js/issues/39161

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

I am looking to concatenate the existing URL with the language segment using jQuery

Looking to update the URL when clicking on a language name? Simply add the current path after the language section. For example, change the URL https://example.com/de_DE/about-us/ to https://example.com/us_EN/about-us/ and vice versa. I attempted this code ...

javascriptjquery

Stop the iframe video when the modal is closed

I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...

javascripthtmlcss

Puppeteer encountered an error when trying to evaluate the script: ReferenceError: TABLE_ROW_SELECTOR was not defined

https://i.stack.imgur.com/PJYUf.jpg Recently, I started exploring pupeteer and node while using vscode. My goal is to log into a website and scrape a table. So far, this is what I have: (async () => { const browser = await puppeteer.launch({ headle ...

javascriptnode.jsvisual-studio-codepuppeteer

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...

javascriptcssvue.js

The Trouble with Vue.js 2 and Axios Scopes

I previously encountered this "problem" but can't recall the correct approach to achieve the desired results. My current setup involves using Vue 2 to load data into variables that are then displayed on the HTML side: window.Vue = require('vue&a ...

javascriptjqueryvue.jsvuejs2

Retrieve the loading status of a manually triggered RTK Query mutation

I'm currently developing a Next.js project utilizing RTK Query. I am seeking guidance on how to access the isLoading state of a mutation that is triggered in a specific way (refer to: https://redux-toolkit.js.org/rtk-query/api/created-api/endpoints#in ...

reactjsnext.jsrtk-query

What is the procedure in AngularJS to obtain an ID from a URL? My current approach involves utilizing Restangular for communication with REST APIs

I have been successfully using Restangular to retrieve data from the backend. The URLs I was hitting used to provide the data in the following format: For example, when I hit http://mysite/responses/, the responses were in the following structure: [ ...

javascriptangularjshttprestangular

Incorporate PNG files with pre-defined labels in a React element

In my application, there is a collection of PNG images with filenames consisting of only 2 letters like aa.png, ab.png, ac.png, and so on. Additionally, there is an API endpoint that retrieves an array of objects with a property "name" containing 3 letter ...

javascriptreactjsreact-hooksmaterial-ui

Create a PDF document using HTML code stored on a separate component within an Angular 2 application

I am facing an issue with my parentComponent and childComponent setup. Specifically, I have a button called downloadPDF in the parentComponent that is supposed to trigger a PDF download from the HTML code of the childComponent without displaying the childC ...

javascripthtmlangularjspdfjspdf

Primary tag badge using Bootstrap design

I am currently following a React tutorial by Mosh, where he is using the badge badge-primary class in a span tag. import React, { Component } from "react"; class Counter extends Component { state = { count: 0, }; render() { return ...

javascriptreactjs

Encountering a timeout error while using selenium-webdriver and phantomJS

Currently, I am developing my automated test scripts using a combination of selenium-webdriver, phantomJS, and mocha. The script I am working on is written in JavaScript. One requirement is to wait until a specific element becomes completely visible befo ...

javascriptseleniumselenium-webdriverphantomjsmocha.js

Encountering an issue: "An error has occurred - ReferenceError: window is not defined"

Initially, everything was functioning as expected. However, out of nowhere, an error popped up saying "ReferenceError: window is not defined". This issue occurred suddenly while I was using Next.js, and the problematic code resides within a custom react ho ...

reactjsnext.js

Is it possible to transfer the reactivity of a Vue ref to another ref while reassigning it?

Below is a simplified version of my Vue component: <template> <div @click="loadEvents">{{ loading }}</div> </template> <script setup> import { ref } from 'vue' let loading = ref(false) loadEvents() func ...

javascriptvue.jsvuejs3vue-reactivity

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

What is the method for altering the state of a single element within a map?

As I delve into learning React, I encountered a persistent issue that has been absorbing my time for several hours now. The problem revolves around mapping an array of product sizes to buttons and controlling the state change of only the last clicked butto ...

javascriptreactjsreact-hooks

Transform the C# DateTime to LocalTime on the client side using JavaScript

Utilizing the Yahoo API on my server to retrieve currency information can be done through this link: Yahoo Currency API This API provides me with both a Date and a Time, which I'd like to combine into a single DateTime object. This will allow me to e ...

javascriptc#datetime

Guide to incorporating a variable into the hyperlink function with Google Apps Script

Currently, I am utilizing Google Apps Script to create customized reports within Google Sheets. Within my spreadsheet, there is a column consisting of numbers that I would like to transform into hyperlinks. The URL for each hyperlink is mostly the same, wi ...

javascriptgoogle-apps-script

What is the best way to choose the initial element in every group using jQuery?

If we have the following HTML input: <p>A</p> <p>B</p> <p>C</p> <div>D</div> <p>E</p> <p>F</p> <p>G</p> We can select B, C, F and G using the following code: $('p + ...

javascriptjqueryhtml

How to launch a new window for a popup

How can I make IE8 open new windows as pop-ups without changing browser settings? I want to use JavaScript's window.open() function. Firefox opens new windows correctly, but IE8 opens them in tabs instead of pop-up windows. Any suggestions on how to a ...

javascriptjavaajaxinternet-explorer-8dom-events

Utilizing Core-TransitionEnd in Polymer: A Beginner's Guide

After a ripple animation on an item has executed, I would like to run a function. Currently, I am using the following code: <post-card id="card1"> <img width="70" height="70" src="../images/start.png"> <h2>P ...

javascripthtmlpolymer