Error: The function c.querySelectorAll is not defined

I encountered an unexpected error in the Chrome inspector while working on a vue.js application:

Uncaught TypeError: c.querySelectorAll is not a function

This error consistently interrupts the execution flow, requiring me to hit continue multiple times after each click. Despite this inconvenience, it does not seem to have any additional adverse effects. Upon investigation in the debugger, I found that c is a variable pointing to a comment in the DOM. These comments are all generated by vue.js as placeholders for dynamic elements.

The stack trace shows very little of my own code (as shown below).

(anonymous) (content_script_bundle.js:16)
childList (async)
appendChild (vue.runtime.esm.js?2b0e:5711)
insert (vue.runtime.esm.js?2b0e:6036)
createComponent (vue.runtime.esm.js?2b0e:5980)
... (additional lines omitted for brevity)

What could be causing this issue and how can I resolve it? Is it possibly linked to the recent update of vue.js?

javascriptvue.js

Answer №1

After stumbling upon this insightful GitHub thread, I made a crucial discovery. The issue at hand has nothing to do with vue.js, webpack, or even Angular. Surprisingly, it is all due to the presence of Ghostery.

Simply disabling Ghostery on your webpage will resolve the problem completely.

Answer №2

When I look at the debugger, it's clear that variable c is pointing to a comment within the DOM

Here lies the issue. Comment nodes do not support querySelectorAll. Similarly, Text nodes don't have this capability either. It wouldn't make sense for them to have it. Only documents and Element nodes possess these query functions.

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

Learning how to interpret input from the command line in Vertx

Would appreciate some guidance on how to read command line arguments in vert.x using JavaScript. For instance, I am wondering how to go about reading: arguments(arg1, arg2, arg3) vertx run example.js arg1 arg2 arg3 ...

javascriptcommand-line-argumentsvert.x

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

javascripthtmlcss

How can I restrict Threejs Perspective Camera from going below a Y value of zero?

Is there a way to avoid setting a negative position.y for a THREE.PerspectiveCamera? I have implemented a customized TrackballControl that limits camera rotation on the z-axis, but I still want to ensure that my camera remains elevated above the "ground" ...

javascriptwebglthree.js

How to retrieve response cookies using RxJS Ajax

When using RxJS to make an Ajax call request, I am able to set the headers of the request. However, I am wondering how I can retrieve the Cookie from the RxJS Ajax Response? import { ajax } from 'rxjs/ajax'; ajax({ url: "some url", body: ...

javascriptajaxcookiesrxjs

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

I encountered a situation where I was successfully looping through objects in an array within my Angular 2 application using observables. In the client service file, my code looked like this: getByCategory(category: string) { const q = encodeURICompon ...

javascriptarraysangulartypescript

Avoid posting hidden values in AngularJS

Whenever I attempt to make a call using $http.post, my hidden fields don't get posted along with the form data. Here is the code snippet: <sf:form ng-submit="post(form)" id="respond" > <input type="hidden"name="form.reply ...

javascriptjqueryangularjs

Setting the focus on an input when updating a property in the Pinia store using Vue

When a component I have is clicked, it triggers a function in the store: <button @click="this.store.foo()"></button> Within the store, I am updating a specific property: state: () => ({ focusIn: false, }), actions: { foo() { ...

javascriptvue.jsfocusstorepinia

Connecting elements within an object using VueJs

Within my object "info_login," I gather account information: async created() { try { const res = await axios.get(inscriptionURL); this.comptes = res.data; this.comptes.forEach(element => { const data = {'pseudo': ...

javascriptapivue.jsauthenticationback

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

WordPress: Issue with Dropdown onchange Event Not Triggering

I'm having trouble getting an event to fire when the dropdown value changes. Can anyone help me figure out where I might be going wrong? JavaScript code jQuery(document).ready(function($){ jQuery('#_ccounts select').on('change&apo ...

javascriptjquerywordpress

The browser is preventing a cross origin request in Fetch

Currently, I am utilizing node, express, and react to build a sign-in portal. In the frontend, I have created app.js and signin.js files. The partial code snippet in the signin.js file looks like this: onSubmitSignIn = () => { fetch("http://localhost:3 ...

javascriptnode.jsreactjsexpress

Issue with Socket.io / ARI: Triggering Alert

I am currently working on implementing error handling for my web application. I am trying to figure out how to use socket.io to display an alert box on the front end if a certain condition is met. For example, when entering an extension number to bridge a ...

javascriptjquerynode.jsexpresssocket.io

Getting a boolean response from an asynchronous SQLite query in Express

I am currently developing a middleware that verifies the validity of a session (meaning it has a logged-in user attached). For this purpose, I am utilizing sqlite3 for node.js. Since I am not very familiar with JavaScript, I am facing some challenges figu ...

javascriptexpresscallbackreturnnode-sqlite3

The data-offset attribute in Bootstrap Scrollspy seems to have no effect on the offset

My attempts to adjust the data-offset for scrollspy seem to have no effect. Below, you can find the relevant snippets of HTML, CSS, and JS: HTML <nav class="navbar navbar-fixed-top navbar-default"> <div class="container-fluid"> <div ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Name the Angular interpolation function with the (click) event

I have a JSON file that defines different dynamic buttons, but when I click on them, the function is not being called. Here's how my JSON file looks: export const liveButtonData = [ { title: 'My Name', function: 'getName()'} ...

javascriptangular

Assistance needed with looping through a JSON data structure

Hello, I am facing an issue after a query in PHP and converting the results to JSON using json_encode. The JSON data I have is: {"ga:visits":"59","ga:pageviews":"117","ga:timeOnSite":"4775.0","average_time_on_site_formatted":"0:01:20","pages_per_visit":"1 ...

javascriptjsonloops

The second function is not being executed during the callback

I've done some research on callbacks, but I'm still having trouble with my code. I've defined my functions and tried to run them onload, but something isn't quite right. The getelements() function works fine on its own. My goal is to l ...

javascriptjquerycallback

TinyMCE Node Replacement Feature

I am working on a WordPress plugin that adds a button to the TinyMCE editor. The intended behavior when the button is clicked is as follows: 1. If the selected text is not part of a shortcode (or is the shortcode itself), then the shortcode should be inser ...

javascriptjquerywordpresstinymce

Submit the form first and then proceed to download another webpage

I have an idea for creating a tool that can accomplish two tasks: Set the language and date on a specific web form: , and Download the text from another page on the same site while retaining these settings. For example, . This tool should simulate a ...

javascriptpythonnode.js

Getting the output from AJAX when the onreadystatechange event occurs

Struggling with retrieving a value from a function and storing it in a variable? Getting an "undefined" result due to JavaScript's asynchronous nature? Unsure how to fix this using "callbacks" or "promises"? Check out the code snippet below. The goal ...

javascriptajax