The Backend URL has not been defined

I recently developed a plugin that is supposed to send data to my backend. However, I encountered an issue while setting up the backend URL configuration. When I checked the URL using "console.log(...)" in my code (in sendDataToBackEnd.js), I received an output of "undefined". The error message displayed was: "Error message: Cannot read property 'backEndUrl' of null"

Here is the project structure:

project1
   public
     backend-config.js
     faviocon.ico
     index.html
   src
     App.vue
     main.js
     config
       backEndUrlConfig.js
     plugin
       sendDataToBackEnd.js

To resolve this issue, I created backend-config.js within the "public" folder:

(function (window) {

    window._backendconfig = {
        urlBackend: `http://localhost:8090/api/auth/event`,
    }

}(this));

My config.js file looks like this:

export default { ...window._backendconfig }

And here is the code for my plugin "sendDataToBackEnd.js":

import url from '../../config/backendURLconfig';

var backEndUrl = url.urlBackend;
console.log(backEndUrl)

const sendDatatoBackEnd = {}

sendDataToBackEnd.install = function (Vue){  
    {Method to send Data to my Backend}
}

export default sendDatatoBackEnd;

Answer №1

Your approach in the config file and the sendDataToBackEnd.js file seems to be causing issues due to a mix of global scope JavaScript and module style JavaScript.

To resolve this, consider either exporting something from the config file (preferable when using modules) or simply accessing it directly from the window object.

Here is an example of how you can structure your files:

// backendURLconfig.js
const config = {
  urlBackend: `http://localhost:8090/api/auth/event`,
}

export default config

// sendDataToBackEnd.js

// Importing config from backendURLconfig.js
import config from '../config/backendURLconfig';

// Accessing urlBackend property from config
var backEndUrl = config.urlBackend;

console.log(backEndUrl)

// Defining functionality to send data to the backend
const sendDataToBackEnd = {}

vuePlugin.install = function (Vue){  
    {Method to send Data to my Backend}
}

export default sendDataToBackEnd;

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

Utilizing ng-model to control the visibility of a label or anchor tag

Here is the code snippet I am working with: <div class="tabs DeliveryRightDiv"> <label class="selected"><a>One</a></label> <label> <a>Two</a> </label> <label> ...

What is the default delay when utilizing the $timeout function in AngularJS?

While looking at the concise information on the AngularJS $timeout documentation page, I noticed that the 'delay' argument is listed as optional. However, when utilizing $timeout without specifying a delay, I observed that a delay is still implem ...

What is the best way to trigger a JavaScript function in an iframe from a child window within the main window?

In my main file, index.php, there is an iframe named main: <iframe src="main.php" id="main_frame" name="main_frame"> </iframe> The main.php file contains two iframes: middle_frame and top_frame. <iframe src="middle.php" id="middle_frame" ...

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

The storage format of the input field is handled differently on the angularjs controller side

Check out the plunker link for this directive in action. A comma is automatically added as the user types in the input, and it displays numbers with 2 decimal places. However, there seems to be an issue where entering '2300.34' results in ' ...

Anchor no longer follows endpoint after Anchor ID is modified following creation - JSPlumb

I am currently developing an editor that involves placing shapes on a canvas and assigning IDs to them. When a shape is placed, endpoints are automatically created and attached to the shape using its ID as an anchor. //Function responsible for adding en ...

Purging information from JavaScript object

Looking for a way to remove just one piece of data from a JavaScript object in my React app. Here's the structure of the object: state = { data: [] } const contactData = { Datas: { name: "william", email: "<a href="/cdn-cgi/l/email-pr ...

The Zingchart final element continually switches colors, creating a mismatch with the legend

I'm facing an issue with my zingchart where the last element's color doesn't match with the legend and keeps changing unlike the others. Any suggestions on how to fix this? The rest of my code works fine. I am fetching data from a MySQL data ...

Can a dynamic field name be incorporated into a JavaScript Object?

My goal is to dynamically add a field name and update the value based on that. In my situation, the eventType can have 4 types: delivery, send, open, click. However, when I implement this code, I am only getting the eventType as a string. const event = J ...

Error compiling: Cannot locate module '../../common/form' within 'src/components/time'

An attempt to import the file form.jsx into the file time.jsx resulted in an error: Error message: Module not found: Can't resolve '../../common/form' in 'src/components/time' //src //common //form.jsx //compon ...

Exporting a module from a JavaScript file

I'm currently working on creating a React component that consists of just a simple function. import React from "react"; function TableSortFunction(data, method, column) { const newList = []; for (let i=0; i<data.length; i++) { ne ...

Choose all elements with a specific class name without the need to specify their position in the list

I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hid ...

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

Currently, I am deep into a project that involves Svelte 3 and Electron 12.0.5 working together harmoniously. For managing hash routing, I have integrated the svelte-spa-router package into my setup. Here is a glimpse of how my project structure appears: n ...

What is the reason for `this` becoming undefined within the filter() function in VueJS?

Currently, I am in the process of designing a Date of Birth (DOB) Form. The interesting part is that I have incorporated VueJS into the form to enhance user experience. The unique feature of this form is that users are required to input their month of bir ...

Accessing elements of both arrays and objects can be done by iterating through them using one code

Suppose I have a function that receives either an object or an array. The goal is to iterate through each element and perform some action on each element along the way. While looping through an array can be achieved using forEach() or a regular for loop, h ...

unable to load variables in google extension due to technical difficulties

I'm encountering an error even though I've already loaded the DOM. I have no idea how to fix this issue and I've been sitting here for hours trying to troubleshoot. The error message I'm getting is: btncheck.js:10 Uncaught TypeError: C ...

Working with React, with the choice of incorporating jsx or not

I am currently delving into the world of React and found myself able to run a simple app without using JSX. In my JavaScript file, I started with: class TestClass extends React.Component Do I really need to utilize JSX or can I just stick with JavaScript ...

What is the process for adding a custom header when making an ajax call in a datatable?

Currently, I am utilizing datatables and need to include a custom header for specific server-side requirements. Can anyone provide guidance on how to send a custom header when navigating to the next or previous pages using jQuery datatables? Additional ...

Vue.js throws an error because it is unable to access the "title" property of an undefined value

I am currently facing an error and unable to find a solution. Even after changing the title to 'title', the error persists. methods.vue: <template> <div> <h1>we may include some data here, with data number {{ counter ...

Skip the "required" attribute in HTML forms for submission

Before submitting a form, I rely on the use of required for initial validation. <form action = "myform.php"> Foo: <input type = "text" name = "someField" required = "required"> <input type = "submit" value = "submit"> <input typ ...