Error in Chrome console after running Elixir webpack: Variable is undefined

I am facing an issue with a javascript file called scripts.js containing vue js code:

var app2  = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
})

After building the js file using gulp elixir webpack, I include public/js/app.js in my html and everything works perfectly fine. However, when I try to log the variable, it returns as undefined.

console.log(app2); //undefined

If I include scripts.js directly in the html without webpack, it works as expected. So, how can I successfully log this variable after webpack build? Any suggestions would be appreciated. Thank you!

Answer №1

It is possible that this variable has been minified and sandboxed, making it unavailable in the global scope. To access the variable after minification, you will need to bind it to the global scope somehow.

One way to achieve this is:

var app2 = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
});
window["app2"] = app2;
// window.app2 = app2;  <- this should also work

By doing this, app2 will always be accessible in the global context of the browser.

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

Generate PDF Files Using Ajax

Currently, I am utilizing FPDF to generate my report. $pdf = new Report('P','mm','A4', $_POST); $pdf->AddPage(); $pdf->Output('file.pdf','I'); Furthermore, I am employing ajax to send a request to t ...

PHP and AJAX: Dual AJAX responses without synchronization

Hey there, I have an ajax-POST request from the client asking for specific information. My idea is to have a PHP file quickly respond with just a number and then follow up with a more time-consuming task that returns an array. I'm curious if it' ...

"Is there a JavaScript code snippet that can retrieve information from a JSON file

Is there a way to create a custom JavaScript function that can extract specific data from a JSON object based on certain keywords? I am working with a Task Manager API and would like to automatically populate fields based on the task title. Here is an exam ...

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

Just running JavaScript code repeatedly in a loop

After running this script, I observed that there are 20 repetitions of the <button> tags. <?php for ($i = 1; $i <= 20; $i++) { ?> <button id="btn-<?php echo $i;?>">Button<?php echo $i;?></button> <script t ...

Escape from the chains of node.js then() statements

While working with a large amount of externally sourced data, I encounter situations where I need to interrupt the chain of commands and redirect the page. This is an example of my setup: Api file gamesApi.getAllResultsWithTeamInformation(passData) ...

standards for matching patterns (such as .gitignore)

Throughout my experience, I have utilized various tools designed to search a codebase for specific files and then carry out operations on those files. One example is test libraries that identify all the necessary files for execution. Another common tool is ...

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

Is there a way to verify if an item is currently present in a three.js scene and subsequently update it?

I am currently facing an issue with checking if an object is already present in a three.js scene and then replacing it. It seems to be more of a scope problem rather than a specific three.js issue. My scenario involves a form that pops up upon clicking, a ...

JavaScript Grouping Arrays

I am working with an array and need to filter it by both Country and Service. So far, I have successfully filtered the array by Country. Now, I want to achieve the same filtering process based on the Service as well. Here is a snippet of the array: [ ...

Using Map in React to Render an Array of Objects

I'm having a bit of trouble displaying an array of objects using the Map method, as I can only see the first item rendered on the browser. I suspect there might be an issue with my .map function, but my knowledge about React and JS is limited, so I c ...

I attempted to switch from "spa" to "universal" in Nuxt, however, I encountered an issue stating that the document is not defined

Recently, I decided to switch from spa to universal in nuxt.config because I wanted URLs that were easy to copy and paste. However, upon making this change, I encountered an error stating "document is not defined." In my search for a solution, I came acros ...

show the attributes of an item contained within an array of objects

Hey there! I'm facing an issue with displaying the content of an object on my HTML page using React. So, here's what's happening: I can access the frontend properties in my object array, but when I try to loop through each element and displa ...

Having trouble getting the pull-right or float-right classes to work properly in Bootstrap 4?

Is there a way to update bootstrap-tabdrop.js to work with Bootstrap 4? Check out the Demo I tried changing pull-right to float-right but it didn't solve the issue :( Any assistance would be greatly appreciated. ...

Having difficulty in choosing and displaying the dropdown values

Below is the code snippet: WebElement pooldropdown=driver.findElement(By.xpath("/html/body/section/section[2]/div[1]/select")); Select sel = new Select(pooldropdown); List<WebElement> list = sel.getOptions(); System. ...

How to use jQuery to display only the following div with a matching class

I'm encountering an issue while attempting to perform a series of steps using jQuery. Unfortunately, I am unable to achieve the desired outcome. There are 3 steps, each with a class of .wiki-step- followed by a number. Here is my JavaScript code: fu ...

VueJS causing roles checking to run forever, creating an infinite loop

Customizing the navigation bar to display elements based on user roles: <b-navbar-toggle right class="jh-navbar-toggler d-lg-none" href="javascript:void(0);" data-toggle="collapse" target="header-ta ...

Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...

Looking for a script to automate clicking on a specific web element using JavaScript

When working with Selenium, we utilize an action to interact with an element by clicking on it at specific coordinates (X, Y). action.MoveToElement(element, X, Y).Click().Build().Perform() I am looking to achieve the same functionality using Javascript. ...

ContextBridge in Electron fails to return a valid response

These are the 4 project files I have: main.js preload.js renderer.js index.html Node: 17.4.0 Electron: 18.2.0 I am trying to open a text file on my filesystem by clicking an event in renderer.js and then loading the contents of that file into a <div&g ...