Encountering issues with NuxtJs development build after upgrading to version 2.15

After updating my old nuxtjs project from version 1.4.5 to 2.12.0, I encountered an issue during the client bundle building process. The error message I received was:

 ERROR  Failed to compile with 1 errors                                                                                                                           

This relative module was not found:  
                                                                                                                             
* ./blank.vue?vue&type=template&id=082ee776&lang=pug in ./src/layouts/blank.vue

You can view the full error here.

Below is the content of blank.vue file:

<template lang="pug">
  nuxt
</template>

This is my nuxt.config.js file:

import webpack from 'webpack'
import CompressionPlugin from 'compression-webpack-plugin'
import { config } from 'dotenv'

config()

// Code snippet continues...

I am wondering if there might be a configuration setting that I missed after migrating to v2 or if there is a new method to load vue templates post nuxt v1. Any assistance on this matter would be greatly appreciated. Thank you!

Answer №1

I came across the solution in this discussion: https://github.com/nuxt/nuxt/pull/4824

All I did was execute yarn add -D pug-plain-loader

After that, I modified my webpack config in nuxt.config.js

    extend (config, { isDev, isClient }) {
      // Add pug loader
      config.module.rules.push({
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      })
    },

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

Toggle the visibility of a component in React by managing its state

Currently, I am faced with the challenge of toggling the visibility of a component based on a state value: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Button from ' ...

The file browser fails to open following an AJAX request in the Firefox browser

I am encountering an issue where the programmatic click on a file input does not open the file browser in Firefox after a successful AJAX call, although it works perfectly in Chrome. The problem persists on version 82.0.3 (64-bit) of Mozilla Firefox for Ub ...

Prevent other keydown handlers from interfering with Material UI TextField events' propagation

Having an issue in my React app where I am unable to prevent the propagation of keyboard events coming from Material UI TextField. For instance, when pressing the backspace key inside the textfield, it triggers an unwanted delete operation in my authoring ...

What is the best way to automatically select a checkbox when using ng-repeat on page

I'm looking to automatically check an input checkbox when the page loads, and if it's checked, subtract its value from the total. How can I tackle this issue? Here's the HTML snippet: <p>{{vm.TOTAL VALUE}}</p> <tr ng-repeat= ...

Using object syntax in React state management

I've been working on dynamically updating the state in my React app, and this is what the current state looks like: this.state = { title: "", image: "", imageFile: "", formTitle: "", formMessage: "", formImage: "", ...

How can I convert a PHP date to a JavaScript date that works across all

I am attempting to create a JavaScript countdown timer that relies on the server time, but I'm facing difficulties in transferring PHP time to JavaScript seamlessly across different browsers. While it functions correctly in modern browsers, older ones ...

Are there any implementations of RFC-6570 for URI templates using JavaScript?

When it comes to registering a controller in node and express, I typically use the following syntax: app.get('/user/:id', function (req, res) {...}); But now, I'm interested in doing it the rfc-6570 way: app.get('/user/{id}', func ...

Determine the product of the total value entered in a textbox and the percentage entered in another textbox to

I've been searching high and low to crack this puzzle, attempting to create a simple calculation on change event using 3 textbox inputs Textbox for Item Cost Manually entered Discount Percentage value e.g. 29 Total: which will be the result ...

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

Using Drag and Drop feature with Nightwatch and Selenium is not functional

While conducting a system test using nightwatch and selenium, I encountered an issue with dragging and dropping elements that are implemented with Knockout-draggable. Manually, the drag and drop functionality works perfectly. Below is the code snippet from ...

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

A guide on tallying entries in mongodb

I am new to working with mongodb. Currently, I have a basic email Schema set up as shown below: const emailSchema = new Schema({ from:{ type: String }, to: { type: String }, subject: { type: String }, content: { type: String ...

Issue with create-react-app and express server not displaying correctly in Internet Explorer

My application functions perfectly with Chrome and Safari. It utilizes React for the front-end and Express for the back-end. However, when I try to open it in Internet Explorer, all I see is a blank white page. Additionally, I encounter this error message: ...

Accessing values from both nested and non-nested JSON objects in Node.js

When calling the function below with both json and a key, I am trying to retrieve the corresponding value. The key can be in the format of abc.cde.def or simply fgh. If the keys include a ., then it signifies a nested structure within the json and values ...

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

Is Nextjs the best choice for developing the frontend code exclusively?

When deciding whether to use Next.js or plain React for my front-end development, should I consider that a back-end already exists? If I am not planning to write a new back-end, which option would be better suited for the project? ...

Determine whether the specified date falls on a public holiday within the selected

I'm currently working with Angular 12 and I need to determine whether today is a regular workday or a day off for employees, including weekends and public holidays. I attempted to use the date-holidays package by importing it like this: import Holida ...

Retrieving text data in Controller by utilizing jQuery AJAX request

Text box and button for input <input type="text" class="form-control" name="ClaimNumber" placeholder="Enter a claim number" id="ClaimNumber" /> <button class="btn btnNormal" type="submit" id="btnSearch"> ...

A step-by-step guide on generating a dynamic JSON file with JavaScript

I am in need of generating a JSON structure that follows this specific format: {"content": { "properties": { "area_id": "20", "origin": "3", "axis": "1", "x_start": "00", "x_end": "99", "y_start": "00", ...

What is the best way to make a table row stand out when clicked on in a Vuejs application

How can I make a table row highlight when clicked in Vuejs using '@click'? I'm currently facing difficulties in achieving this. Below is my html template where I'm applying the class 'active' to the Boolean 'isActive&apo ...