Issue with Woocommerce-admin extension: modifications made to js/index.js are not taking any effect

I've been working on creating a custom extension for woocommerce-admin analytics. I successfully installed an example extension and it functions properly. However, any updates that I make to its js/index.js file are not showing up in the browser.

Specifics:

To install woocommerce-admin, I followed the guidelines outlined here: https://github.com/woocommerce/woocommerce-admin

Next, I added the add-report extension by following these instructions: https://github.com/woocommerce/woocommerce-admin/tree/main/docs/examples/extensions

When I access http://localhost/wp-admin, the example extension works perfectly fine.

According to Woocommerce Dev Docs, "You can modify Javascript and PHP files in the example and see changes applied upon refreshing", but despite editing add-report/js/index.js, no updates are reflected in the browser.

Any insights into what I might be overlooking?

javascriptwordpressnpmwoocommercebackend

Answer №1

After much trial and error, I finally figured it out: the key to resolving my issue was realizing that I needed to modify the js file located in the main woocommerce-admin/ directory, rather than the one in the new add-report/ plugin folder.

Any alterations made to /wp-content/plugins/add-report/src/index.js were simply being ignored, resulting in no visible changes in the browser :-(

However, modifications done on /wp-content/plugins/woocommerce-admin/docs/examples/extensions/add-report/src/index.js were successfully compiled and had a noticeable impact in 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

Vue.js failing to update in real-time

Within my HTML code, I have the following: <div class="pl_wrapper"> <div class="options_pl"> <input type="button" @click="optionButtonClicked" class="option_button_pl" value="List"> <input type="button" @click="opt ...

javascriptvue.js

Creating a three.js shader that continuously moves the vertices of a point cloud within a sphere

My current project involves creating a points cloud with moving points that are confined within a sphere of a specified radius, X. Initially, I was able to achieve this without using shaders, but now I am experimenting with shaders to enhance the effect. ...

javascriptthree.jsglslshader

Exploring the seamless integration of AngularJs databinding with JSON for dynamic content

I have a question that seems simple, but I can't seem to find the answer anywhere. My goal is to load JSON data from my server into the client using AngularJS. How can I display all three slides in my view with AngularJS? Currently, with this code, ...

javascriptangularjsjson

Troubleshooting: Angular post request encountering 415 error issue

I'm attempting to retrieve the response from the code snippet below, which produces a JSON output. When I try this on the server, I encounter a 415 error and do not receive the response. constructor(private http: HttpClient){} public getReports(pos ...

javascriptangularhttphttp-headersangular-httpclient

Upgrade to the most recent version of Polymer and npm

It seems like this question is more related to npm rather than Polymer. I have been working on a substantial Polymer project, currently at version 1.3.0 as indicated in the bower.json file within the Polymer directory. After being away from the project fo ...

node.jsnpmpolymer

Configuring RingoJS to search for necessary modules within the node_modules folder

Currently, I am in the process of transitioning a service from nodejs to ringojs. My main hurdle involves the usage of require(). To illustrate, take a look at this snippet: var restify = require('restify'); The issue arises when RingoJS is una ...

javascriptnode.jsringojs

Guide on importing a Blender scene into three.js with textures, lighting, and camera

I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...

javascriptthree.jsblender

Develop a Vue mixin to enable theme switching in a Vue.js application

I have successfully developed three distinct themes: light, default, and dark. Currently, I am working on implementing a toggle function in the footer section that allows users to switch between these themes effortlessly. Following the guidance provided b ...

javascriptvue.js

Getting the mouse location with three.js: A step-by-step guide

Hey there, I'm currently working with IcosahedronGeometry. I've added CircleGeometry to each of its vertices. My goal now is to allow the circle to sense the mouse movement and follow it when it gets close. To achieve this, I've created a Ri ...

javascriptthree.js

How can jQuery data() be used with multiple arguments?

Is it possible to add multiple data variables to an element before triggering a specific action? If so, how can I achieve this? $("#dlg_box").data("r_redirect","index.php").dialog("open"); ...

javascriptjqueryhtml

Utilizing Javascript to implement the Onchange event on form fields in a Reactjs page

Seeking a solution to track field changes on a form created with Reactjs using custom javascript code that can be embedded on the page. While I am familiar with using the .change event from jQuery to monitor field value changes on non-react pages, I am un ...

javascriptjqueryhtmlreactjs

Combining Objects in Angular 2: Extending Your Data Structures

Looking to combine 2 objects in Angular 2? In AngularJS 1, we used the "merge" and "extend" functions: https://docs.angularjs.org/api/ng/function/angular.merge https://docs.angularjs.org/api/ng/function/angular.extend However, it seems like there is no e ...

javascriptangularjsangular

Disable watching files using tsc -w in npm

I've been delving into angular2 and I'm trying to figure out how to prevent the browser from refreshing every time there's a change in a file. In my package.json, I have the following script: "start": "tsc && concurrently \"tsc ...

npmpackage.json

Resolving the CORS preflight issue with Loopback API in Redux

My current setup involves a client application running on React-Redux and an API app on Loopback. During local testing, I have the client app on port 8080 and the server app on port 3000. While attempting to test Google OAuth (using the loopback-passport ...

javascriptreactjscorsreduxloopbackjs

Angular 5 combined with Electron to create a dynamic user interface with a generated Table

I am working on an Angular Pipe: import {Pipe, PipeTransform} from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as Remarkable from 'remarkable'; import * as toc from 'markdown-toc&a ...

javascriptangularmarkdown

Issues regarding the charcodeat function in JavaScript, specifically focusing on the hex values 0xd7ff, 0xe000, and 0

Can you explain the significance of the values 0xd7ff,0xe000,and (code << 10) + next - 0x35fdc00 ? const nonASCIIwhitespace = /[\u1680\u180e\u2000-\u200a\u202f\u205f\u3000\ufeff]/ const fullCh ...

javascripttypescriptunicode

"Encountering problem while loading data with the ng-table function

I'm struggling to load a data set using ng-table. Could you please review my sample service and controller below? app.service('ContactService', function () { var bfLosses = [ { idx: 0, uid: 'User 11', name: 'Name ...

javascriptangularjsngtable

Automatically Populate list upon webpage initialization - React, Redux, Firebase

A webpage I am working on consists of two main components: Categories and Items By utilizing the function initCategories() called within the componentDidMount() lifecycle method of Categories, I successfully display all categories on the screen. The initC ...

javascriptreactjsreduxgoogle-cloud-firestorereact-redux

Console shows successful jQuery ajax request, but the callback function is not being executed

I've been working on a jQuery POST request that's been giving me some trouble. Here is a snippet of the code I'm using: $.ajax("/myurl",{ data:{ ... }, mimeType:"application/json", dataType:"application/json", me ...

javascriptjqueryajax

Tips for incorporating AngularJS with dynamically added elements

Essentially, I have a structure similar to this example The formula for every cell in the last column should be: value[i][2] = value[i-1][2] + value[i][0] - value[i][1] I'm currently facing two issues. The first one arises when attempting to progra ...

javascripthtmlangularjsangularjs-scopeappendchild