Nuxt 2.5 and higher do not recognize the definition of Global

After utilizing Nuxt 2.1 in my app, I proceeded to upgrade it gradually and everything was fine until Nuxt 2.4. However, starting from version 2.5 and above, production builds are breaking with an error stating global is not defined.

The location of the error lies within .nuxt/client.js@26:

if (!global.fetch) { global.fetch = fetch }

I am struggling to find the solution for this issue (seems like defining global is necessary), and I have not been able to come across any helpful answers so far.

List of dependencies:

    "dependencies": {
        ...
      },
      "devDependencies": {
        ...
      }

.babelrc:

{
  "presets": ["@babel/env"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-export-namespace-from"
  ]
}
javascriptvue.jswebpackbabeljsnuxt.js

Answer №1

After spending countless hours investigating, I finally discovered that the root of the issue was in this configuration:

extend(config, {isDev, isClient, isServer}) {
  if (isClient) {
    config.target = process.env.BUILD_TARGET || 'electron-renderer';
  }
})

I have no clue why everything was functioning correctly before version 2.5 and then suddenly stopped working, but that's the situation.

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

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators

Vue.js - experiencing issues with conditional styling not functioning as expected

Can someone help me with an issue I'm having? I've created a button with a heart symbol that is supposed to change color when clicked, but it's not working as expected. This is my current code: <template> <button v-bind: ...

javascriptvue.js

What is causing the Firebase emulator to crash when I run my Express code?

This project is utilizing express.js along with firebase. Whenever attempting to access a different file containing routes, it results in failure. Instead of successful emulation, an error is thrown when running this code: const functions = require(" ...

javascriptexpressgoogle-cloud-platformgoogle-cloud-functionsfirebase-tools

Managing column counts in form groups using BootstrapVue

When I use BootstrapVue to create a form group with input fields and select boxes that are dynamically added on a button click, I need to display another element (such as a button or div) to the right of it for removing the field by binding a click event. ...

vue.jsbootstrap-4

Problem encountered while revalidating Next.js and Sanity documents through a webhook

I'm currently developing a Next.js 13 project that utilizes Sanity as its CMS and is deployed on Vercel. To ensure that components and pages are revalidated whenever a new testimonial is added, updated, or removed in Sanity, I have configured a webhoo ...

javascriptnext.jswebhookssanity

Utilize jQuery to toggle classes on multiple elements in web development

I've been struggling to streamline this code I created for the website's navigation. As a novice in Javascript and jQuery, I would appreciate any help or advice. Thank you! Since the page doesn't reload, I have implemented the following met ...

javascriptjquery

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...

javascriptjquerycssjquery-animateslideshow

Convert HTML templates into JavaScript on the client side using Angular framework along with Browserify, Babel, ES2015, and Gulp

Having trouble with my Browserify Angular configuration file, specifically when using require() to load HTML templates. I attempted to use stringify or browserify-ng-html2js in the transform() function, but it resulted in multiple transform calls in my gul ...

javascriptangularjsgulpecmascript-6browserify

Is it better to conceal modals or completely eliminate them from the DOM when working with React?

I am currently developing a React application that involves multiple modals, with only one active at a time and no nested modals. I am torn between two approaches for handling the showing and hiding of these modals: The first approach involves having a b ...

javascriptnode.jsreactjsmodal-dialogelectron

The Vue Router Replace function continues to activate the created() lifecycle hook

I am working on a view page that contains multiple tabs. Whenever the index of a tab changes, I make an update. For example, when you click on the "Info" tab: this.$router.replace({query: { section: 'Info'} }) What I want to achieve is - myUrl/ ...

vue.jsvue-router

Extracting and retrieving the value from the paramMap in Angular/JavaScript

How can we extract only the value from the router param map? Currently, the output is: authkey:af408c30-d212-4efe-933d-54606709fa32 I am interested in obtaining just the random "af408c30-d212-4efe-933d-54606709fa32" without the key "authke ...

javascriptangulartypescript

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss

Handling Google-Strategy authentication in a Vue application with passportjs

I am seeking advice on how to implement the Google strategy of passportjs in my Vue App with Node running in the backend. The Vue app is hosted on localhost:8080, and Node is on localhost:5000 I have successfully set up a Local strategy using: Sending A ...

node.jsvue.jsoauth-2.0passport.jspassport-google-oauth

Refine the Vuex state with a filter

Currently, I've progressed in my Vue development journey and started exploring the implementation of Vuex for state management. In the past, I had a main Vue component that handled search functionality, an array of items to iterate over, and the iter ...

javascriptfilteringvue.jsvuex

A guide on extracting information from a personal Flask JSON route endpoint with Axios

I am looking to store JSON data in a variable using Axios in Javascript. The JSON endpoint is generated by my own server's route http://123.4.5.6:7890/json. I have been successful with this function: async function getClasses() { const res = await ...

javascriptjsonajaxserveraxios

Utilizing JavaScript variables to generate a custom pie chart on Google

Greetings! I must admit that I am a novice, especially when it comes to JavaScript. My background is mainly in PHP. Recently, I came across a fantastic pie chart created by Google https://developers.google.com/chart/interactive/docs/gallery/piechart I a ...

javascriptphpjsoncharts

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Accessing the value returned by an asynchronous function in Node.js with Electron

As I embark on a new project, my goal is to take user input, process it through a function, and then return the updated value back to the user. Despite being a novice with async functions, I've done extensive research but still can't pinpoint if ...

javascriptpythonnode.jsasynchronouselectron

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

javascripthtml

Creating a v-for in a component without using v-bind

I am currently utilizing PHP for my backend and Vue for my frontend. My PHP code reads mock folders using scandir() and returns a JSON object which I successfully retrieve in my Vue component. However, I'm facing difficulty in looping through this obj ...

phpvue.jsvue-componentv-forscandir