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

Using Vue.js to bind labels and radio buttons in a form

My goal is to generate a dynamic list of form polls based on the data. However, using :for or v-bind:for does not result in any HTML markup appearing in the browser, causing the labels to not select the corresponding input when clicked. I have prepared a J ...

javascriptvue.jsnuxt.js

Dynamically divide canvas screens based on fabricjs dropdown selection

I am attempting to implement split screens in fabric js, such as 1, 2, 4, 8, and 16. The screen should split based on the selection from the dropdown menu. Check out my current code where I have successfully uploaded images. If I click on the images, th ...

javascriptangulartypescriptcanvasfabricjs

Challenges arise in the grid system when implementing Material UI

Hey there, I've been trying to create card sets using material UI. I have organized the data from a JavaScript object, but unfortunately, the output is not what I expected. Below is the code I am currently using: const CardFeatures = () => { ...

javascriptreactjsmaterial-ui

Experience the classic game of rock-paper-scissors brought to life through JavaScript and HTML,

I've been working on a rock, paper, scissors game in JavaScript and I'm struggling to get the wins and losses to register correctly. The game keeps resulting in a draw even though I've checked my code multiple times. It's frustrating be ...

javascripthtml

Django Website Experiencing Issues with Google Analytics Integration

I implemented google analytics by inserting the tracking script tag and code at the bottom of the head section in my base.html template which serves as the foundation for all other pages. Additionally, I set up 2 click events to track when users click on ...

javascriptjquerydjangogoogle-analytics

Exploring ngModel components with a specified class

In my HTML code, I've assigned many elements with ngModel defined as ng-model = "object.[something]". For example: <div class="form-group row" ng-model="object.askUser"> I use this method to keep my purpose clear for these elements. My questi ...

javascripthtmlangularjsangular-ngmodel

Establishing a default v-on event for a Vue component

Within my custom 'text-input' components, I include some default markup and an 'input' element. An effective method for passing the value of the 'text-input' to its parent is by emitting an event when the value changes. To h ...

javascriptvue.js

The concept of setTimeout and how it affects binding in JavaScript

I have limited experience with jquery, mainly using it for toggling classes. However, I will do my best to explain my issue clearly. I have three div elements and when one is clicked, the other two should rotate 90 degrees and then collapse to a height of ...

javascriptjquery

What is the best way to display an international phone number using Angular Material V6?

I've been working on a project that utilizes Angular Material V6. My goal is to display international phone numbers with flags in a Material component text box. After some research online, I came across an npm module that achieved this but it was tail ...

javascriptjqueryangular5angular-material2

react-router is unable to navigate to the desired page

I am currently using react-router-dom in my project, but I am still relatively new to it. I have encountered an issue regarding page navigation. Below is the code for my App.js: class App extends Component { render() { return ( <div classN ...

javascriptreactjsreact-routerreact-router-dom

Challenges surrounding jQuery's .before

Currently, I am in the process of creating a simple carousel consisting of 4 divs. The carousel is utilizing 2 jQuery functions to position a div at either the first or last slot. The transitions being used are only alpha transitions as there is no need fo ...

javascriptjqueryhtml

How come the use of a timeout causes the this variable to seemingly lose its reference?

What is the reason why this: myelements.mouseenter(function() { clearTimeout(globaltimeoutvar); globaltimeoutvar = setTimeout(function() { var index = myelements.index(this); console.log(index); // -1 }, 150); }); Returns -1, while this: m ...

javascriptjquerysettimeout

Is it feasible for a JavaScript function to receive the innerHTML of the element from which it is invoked as an argument?

Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...

javascripthtml

Managing Events in Angular 2 and Creating Custom Event Handlers

Currently, I am in the process of developing a component library in Angular 2 for our app teams to utilize. One of the components I recently created is a modal, but I am encountering some accessibility challenges. Specifically, I want the modal to close wh ...

javascripteventsangulartypescriptmodal-dialog

I am trying to figure out how to properly utilize server-only functions within Next.js middleware

In my current project, I am utilizing Next.js 13 along with the App Router feature. While attempting to include a server-specific fetch function in middleware.js, an error message is encountered: Error: Unable to import this module from a Client Compone ...

javascriptnext.jsmiddleware

What is the best way to incorporate an environmental variable in my AngularJS controller?

My API Key is securely stored in my '.env' file to keep it hidden from Git. Here's a snippet of my .env file: API_TOKEN=secrettokengibberish When working on my Angular controller, I need to retrieve this variable for my AJAX call. This i ...

javascriptangularjsajaxapienvironment-variables

javascript design pattern - achieving unexpected outcome

In the code snippet provided, the variable a is turning out to be undefined. Are you expecting it to display the parameter value passed in the parent function? function test(a) { return function(a) { console.log('a is : ' + a); // Ou ...

javascript

Using Express Validator is very easy and efficient once you understand its

Looking for a validator to catch errors and log them to the console Check out the code snippet below: const expressValidator = require('express-validator'); const { check, validationResult } = require('express-validator/check'); const ...

javascriptnode.jsarraysexpressvalidation

Tips for activating and setting up Bootstrap popovers

I've been trying to add some popovers to my webpage, but I'm facing a hurdle. I added a few button popovers in the footer, but nothing happens when they're clicked. I created a js file for initialization and imported it at the end of my pa ...

javascripthtmlbootstrap-5bootstrap-popover

React component using Highcharts is displaying categories as numeric values instead of text

Incorporating the highcharts-react package (https://github.com/highcharts/highcharts-react) into my Laravel project has presented a unique challenge. I am attempting to fetch data from my reducer and transform it into a string to populate the categories in ...

javascriptreactjshighcharts