What could be the reason for the Unknown term error I am now encountering in Nuxt?

Today, I encountered an issue with my Nuxt project that was previously running smoothly.

The problem seems to be related to Vue Flickity, which includes a CSS file from the node_modules directory. This setup has been functioning correctly until now.

Upon running npm run dev, I received the following error message:

ERROR in ./node_modules/flickity/dist/flickity.css?vue&type=style&index=0&lang=css& friendly-errors 16:00:12

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 16:00:12 SyntaxError

(141:7) Unknown word

139 | 140 | if(module.hot) {

141 | // 1548777611244 | ^ 142 | var cssReload = require("../../extract-css-chunks-webpack-plugin/dist/hotModuleReplacement.js")(module.id, {"fileMap":"{fileName}","reloadAll":true}); 143 |
module.hot.dispose(cssReload); > friendly-errors 16:00:12 @ ./node_modules/flickity/dist/flickity.css?vue&type=style&index=0&lang=css& 1:0-576 1:592-595 1:597-1170 1:597-1170 @ ./node_modules/vue-flickity/src/flickity.vue @ ./plugins/vue-flickity.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Screenshot:

https://i.sstatic.net/0hQaQ.png

I haven't made any changes to Webpack configuration as I used the cli to create this project.

Vue Flickity is being utilized through a plugin, recommended for Nuxt, with SSR set to false. Despite this, it was functioning perfectly fine until now.

I'm puzzled by this sudden issue and would greatly appreciate any assistance or guidance on resolving it.

javascriptvue.jswebpacknuxt.js

Answer №1

There was a glitch found in nuxt version 2.4.0, but thankfully it got resolved with the release of version 2.4.2. You can find more information about this update at this link

Answer №2

Encountering this problem in Nuxt3 has been a common occurrence for me, and I've found that reverting back to node version 16.19.1 solves it.

Answer №3

Your current version of Nuxt is most likely set as "nuxt": "^2.3.4" in the package.json file, which caused an automatic update to Nuxt 2.4.0. To prevent this, modify it to "nuxt": "2.3.4" and then proceed with npm install.

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

Creating a function in Javascript to adjust opacity when clicked

I am looking to create a function that controls opacity when a particular element is clicked. I tried the following code, but it did not have the desired effect. var changeOpacity = function(id) { document.getElementById(id).style.opacity = "1"; }; ...

javascript

What is the best way to add an element while preserving its original placement?

I need a solution to duplicate the code of an element and transfer it to another element without removing it from its original position. Currently, I have a JavaScript function that allows you to move a picture to a box when it's clicked. However, th ...

javascriptjqueryhtmlcss

Start the video on repeat from the chosen time frame

I am working on incorporating a video file into my design that is 2 minutes in length. I want the video to play from the beginning initially and then loop from 1.00 sec to 2.00 sec. I have attempted various methods, but there seems to be a noticeable jump ...

javascriptjqueryhtmlhtml5-video

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

Include a new feature within an onClick event

I'm looking to implement a single page application using React.js and I want to incorporate a list within a material-ui drawer. The goal is to dynamically add elements to an array every time a button is clicked, but I'm stuck on how to write this ...

javascriptreactjsonclicksingle-page-applicationmaterial-ui

Is Python being used to track NBA.com stats?

Does anyone have any advice on how to extract NBA.com "tracking" stats using a python script and display them in a simple table? I'm particularly struggling with this specific section of stats on the site. Accessing stats directly from NBA.com can be ...

javascriptpythondatabaseweb-scraping

What steps can I take to ensure my Vue website is tested on various devices and views before it goes live online?

My current project involves developing a website that utilizes Vue-js for the front-end, and Node + MySQL for the back-end. During development mode, when I connect to the internet and run npm run serve, I come across these lines in my command-line: https: ...

mysqlnode.jsvue.jsexpress

Struggling to connect API from React and Node using a proxy server

I have encountered a troubleshooting issue with React and Node that I am struggling to resolve. The problem lies in the communication between my node server and coinmarketcap API. While I successfully receive data from both endpoints (all coins and individ ...

javascriptnode.jsreactjsblockchaincryptocurrency

I am encountering an issue where the useState hook is returning an undefined value on separate components, even after

When setting up a login context, I wrap all my routes with the context provider and pass the initial value using useState: <userContext.Provider value={{loggedUser, setLoggedUser}}> In LogInMenu.jsx, which is responsible for setting the loggedUser ( ...

javascriptreactjsreact-hooksreact-context

Implementing gridlines on a webpage using HTML and JavaScript to mimic the grid layout found in Visual Studios

Currently, I have a grid snap function in place, however, I am looking to add light grey lines horizontally and vertically on my Designing application. The goal is to achieve a similar aesthetic to Visual Studios' form designing feature. Utilizing so ...

javascripthtmlcssformsgridlines

What is the process of mapping an array of object IDs in order to retrieve the corresponding objects associated with each ID

I currently have a specific collection that stores IDs referencing objects in a separate schema. If I'm working with an array containing these IDs, what is the best way to iterate through and retrieve the corresponding object? Although I've mad ...

javascripttypescriptmongodbexpress

Encountered a glitch in the console while working with Vue-chartJS and Webpack

I recently set up vue-chartjs and included chart.js via NPM After running npm start, my server launched successfully, but I encountered an error in the browser console: TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a functio ...

npmwebpackpackagevue-chartjs

Hey there, I'm looking to automatically delete new users from my mongoDB atlas database if they haven't verified their phone number within 2 minutes. I believe using the TTL feature would be

Database Schema In my User schema, the field isVerified is initially saved as false. The user enters their phone number, receives a verification token via SMS, and both the token and number are saved in the database. Once the user enters the verification ...

javascriptnode.jsreactjsmongodb

Utilizing the change function in conjunction with that

My attempt at creating a simple function to implement the change function didn't go as planned:/ What I am trying to achieve: 1- When a cost checkbox is checked, assign the corresponding cost (e.g., cost1.checked ? cost1 = 10 : 0) 2- Calculate and di ...

javascriptjquery

Encrypting and decrypting data using RSA in TypeScript

Currently, I am utilizing Angular 4 to develop the front end of my application. For authentication, I have integrated OAuth2 on the backend (which is created using Spring in Java), ensuring that only authorized individuals can access my app. However, ther ...

javascriptangulartypescriptencryptionrsa

What is the method for displaying a cube map reflection on an object without revealing the cubemap in the backdrop?

Is it possible to display a cube map reflection on an object without showing the cubemap in the background? I am interested in achieving a reflection on a lever mechanism without the cubemap being visible in the background. Instead, I would like the backg ...

javascriptthree.js

The use of JavaScript within the code results in the <header> and <nav> elements failing to display on the browser

Currently, I am tackling a webpage project that involves using scripts in both the head and section elements to generate a table where clicking on the cells changes their color randomly. However, a glitch seems to be hindering the display of the header and ...

javascripthtmlcss

What is the proper way to utilize a variable as a field name in a Mongo query within the Meteor framework?

Is there a way to utilize a variable as a field name in a Mongo query within a Meteor application? For instance... This code snippet performs a find operation on my request controllers collection after capitalizing the collection name for the parent id o ...

javascriptmongodbmeteor

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 could be the reason for my Ajax failing to send the data to the external file?

My current setup involves sending data to an external PHP file via AJAX in order to generate a PDF using TCPDF and return it back to the page. However, I seem to be facing some issues with this process. Despite my efforts, I am unable to pinpoint the mist ...

javascriptphpjqueryajaxtcpdf