In NextJS 12, an UnhandledPromiseRejectionWarning occurs when trying to reference the TextEncoder which is not defined

Currently, I am working on developing a Spotify clone using NextJS 12 along with a Tailwind CSS template. To initiate the project, I executed the following command: 

npx create-next-app -e with-tailwindcss spotify-2
.

The project was successfully created, but upon running npm run dev after changing directories via cd spotify-2, an error appeared as follows:

> @ dev /home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:14702) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined
    at /home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:67:19
    (...)

I'm unsure how to proceed from here, any advice would be greatly appreciated!

javascriptnode.jsreactjsnpmnext.js

Answer №1

Encountered a similar issue while using the TypeScript template.

npx create-next-app@latest --typescript

Discovered that my Node.js version was outdated at 10. After upgrading to version 16 LTS, the error was resolved. Verify your Node.js version by running this command:

node -v

The system requirements specify Node.js version 12.22.0. https://nextjs.org/docs/getting-started#system-requirements

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

An issue encountered while implementing a post method with fetch and Express

I'm just starting out, so I hope my question isn't too basic. My goal is to send a longitude and latitude from client-side JavaScript to a Node.js server using Fetch and Express.js. Below is the HTML code snippet: <!DOCTYPE html> <html ...

javascriptnode.jsexpresspostfetch

Sustain unbroken websocket connection with Discord using Node.js

I've been working on developing a Discord bot using the raw API, but I've encountered an issue where the bot stops functioning after some time. I suspect that this is due to neglecting to maintain the websocket connection. How can I ensure that ...

javascriptnode.jswebsocketdiscord

Steps for starting the "Simple Node.js Express 4 Application (Universal Windows)" on Windows IoT without using a debugger

Hey everyone! I'm trying to figure out how to run the Basic Node.js Express 4 Application (UWP) on my raspberry pi 2 without relying on the visual studio debugger. The app works fine when launched via Visual Studio Remote Debugger, but I encounter is ...

node.jswindowsraspberry-pi2iotwindows-10-iot-core

Issue with NextJS Runtime: "invalid objects" detected during iteration in a for-loop

Previously, I had an issue trying to figure out how to create custom layouts for my objects in Next.js using a list of items (similar to data.map). (React / NextJS define Elements ni map) A helpful solution was provided: (https://codesandbox.io/s/funny-v ...

reactjsnext.jsruntime-error

What is the proper way to transfer information to my ajax function from my controller?

I need to dynamically update an element on my webpage based on server-side code events. For example, when I trigger the "Start" function by clicking a button, I want the text inside a specific element to change to "Downloading", and then once the process i ...

javascriptc#asp.netajaxasp.net-mvc

Console log is not displaying the JSON output

I am currently working on implementing a notification button feature for inactive articles on my blog. I want to ensure that the admin does not have to reload the page to see any new submitted inactive articles. To achieve this, I am looking to use Ajax, a ...

javascriptphpjqueryajax

How to Disable a Button with JavaScript in a Vue.js Application Without Using jQuery

I'm currently in the process of transitioning old jQuery code to JavaScript for a Vue.js application. function DisableSubmit() { submitButton.prop('disabled', true); submitButton.attr('data-enabled-value', submitButton.val ...

javascriptjqueryvue.js

Is there a way for me to make this Select update when onChange occurs?

I am facing an issue with a react-select input that is supposed to display country options from a JSON file and submit the selected value. Currently, when a selection is made, the field does not populate with the selection visually, but it still sends the ...

javascriptreactjsmaterial-uireact-select

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

I'm a beginner in JavaScript and I recently created a React project. Everything was working smoothly in local development until I deployed the project on Vercel. The issue is when a user clicks on the "about button," instead of showing 'about.htm ...

javascriptreactjs

Several conditional statements in JSX

In my JSX Return() code, I am encountering an "If" issue when one of my conditions has 2 different 'onClick' events. There are 2 'a' tags, where one will display button 'X' if a statement is true and the other will display but ...

javascripthtmlreactjsif-statementjsx

angular data binding returning the identifier instead of the content

I have been dealing with managed fields retrieved from a web server in the following format: { "fields":{ "relationshipStatus":[ { "fieldId":4, "name":"Committed" }, { "fieldId":2, ...

javascriptangularjsjsonangular-template

Utilizing a drop-down menu to display two distinct sets of data tables

After spending some time on my WordPress site, I've encountered a problem that has me feeling stuck. Currently, I have two functioning datatables which are displaying one on top of the other on the page. Additionally, there is a dropdown selection box ...

javascriptphpjquerywordpressdatatable

What is the best method for performing cross-domain queries utilizing ajax and jsonp?

When attempting to send an ajax request to a specific URL, I encountered an error. Below is the code I used: $.ajax({ url: "http://webrates.truefx.com/rates/connect.html?q=ozrates&c=EUR/USD&f=csv&s=n", dataType : 'jsonp', ...

javascriptjqueryajaxcsv

Utilizing theme.spacing() for organizing mathematical content in Material-UI v5

When using MUI v4, my JSS classes included code snippets like this: paddingTop: theme.mixins.toolbar.minHeight + theme.spacing(1) However, in the new version, MUI v5, theme.spacing() now returns a string rather than a number. This means that the above sta ...

reactjsmaterial-ui

The webpage freezes when attempting to run jQuery with Selenium

I'm currently facing an issue where my selenium script hangs the webpage whenever I try to find an element using jQuery. The script doesn't execute and a pop up appears in the browser with the message "A script on this page may be busy, or it may ...

javascriptjqueryhtmlselenium

Convert the date and time of "2018-03-31T05:37:57.000Z" to a

I need help converting the universal time 2018-03-31T05:37:57.000Z to a timestamp in the form of 1520919620673. Can someone please provide guidance on how I can achieve this conversion? ...

javascriptnode.js

Mastering the art of mapping values in Material UI's auto-complete feature

I retrieved data from Firebase and stored it in "arr". How can I integrate this data into a Material-UI Auto-Complete field? import React, { Component } from 'react' import { Link, browserHistory } from 'react-router'; import { connect ...

reactjsmaterial-ui

The output is visible in the Firefox console but does not display on the actual browser

Can anyone help me with a bug in my javascript/jQuery/PHP/mySQL application? When I submit a form, the response is visible in the Firebug console window but not in the browser window. I know this is a vague question, but I'm hoping it might be a commo ...

javascripthtmlconsoleresponse

Restrict the option to select checkboxes

Can anyone help with limiting checkbox selection? This is the code I currently have... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'" ...

javascriptphpjquery

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

javascriptcssangularbuttonclick