Combining NPM Dependencies in a VUE.js JavaScript Project

For a unique situation in a Vue.js and JavaScript project, there is a need to integrate an NPM package dependency into the current JavaScript code base.

In this particular case, the NPM package should no longer be part of the nodes_modules folder but rather integrated directly into the JavaScript code itself.

Both codebases are expected to grow together in the future, independently from the original NPM package and not as a Fork.

What is the best way to merge or combine an NPM package with a JavaScript project?

Additional Details:

  • The library that needs to be integrated is OIDC client. It is an open source project "Archived" by its author (So no possibility to create Pull Request for a new release).
  • This library is used to create a SSO for an internal project. The architect has chosen this library for specific project needs and there are no alternative options available.
  • There is no "internal package manager" available within the company.
  • I prefer not to host the fork on my personal Github and manage the package on the NPM website.
javascriptvue.jsnpmnode-modules

Answer №1

After numerous attempts to find a solution to this issue, it became clear that using Patch-Package was the most effective way to merge a dependency by simply patching over it instead of creating a fork.

The syntax is straightforward and integrates seamlessly with NPM:

  1. Installation: npm i patch-package

  2. Make changes directly to the code of your dependency in the node_modules folder

  3. Execute npx patch-package some-package, where "some-package" is the name of the package you want to patch

https://github.com/ds300/patch-package

Check out the documentation here: https://github.com/ds300/patch-package

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

Some mobile devices are experiencing issues with Android webview not executing javascript functions

Everything was running smoothly on my webview app on the HUAWEI RNE-L22 and iPhone. However, when I tried to run the app on the samsung SM-G530H, it failed to execute my JavaScript function. Surprisingly, the function worked fine on a normal phone browser. ...

javascriptandroidwebview

What are some ways to style an image that has been added using JavaScript using CSS?

I utilized a JavaScript function to add an image, which looked like this: function show_image(src) { var img = document.createElement("img"); img.src= src; document.body.appendChild(img); } But when I attempt to change its style using CSS: img ...

javascriptjqueryhtmlcssimage

Executing an Ajax call to trigger a NodeJS function that executes a bash script

I have created a bash script to generate a JSON file that needs to be parsed and sent to the client-side JavaScript for display. My goal is to achieve this without refreshing the page and without using jQuery. I attempted to use Axios but seem to be facing ...

javascriptjsonnode.jsajaxbash

Trigger Screen Reader to Announce When a Component Is Deleted

When the last filter item is removed, I want the screen reader to announce "All Filters Are Removed." However, if the active filter component is removed without any other element to assign an aria-label attribute, I'm not sure how to handle this situa ...

javascripthtmlangularaccessibilityscreen-readers

Using D3.js to create a multi-line chart with interactive mouseover tooltips

I attempted to create a multi-series line chart and implemented tooltips based on this particular stackoverflow response. However, despite my efforts, the tooltip feature does not seem to be functioning properly and I am struggling to identify the issue wi ...

javascriptd3.js

Tips for creating animated arc fills using CSS

Can we gradually fill the color of a CSS semi-circle in a counterclockwise direction, similar to a progress bar? Here is the code for the semi-circle: https://jsfiddle.net/sonymax46/wqfovdjh/7/. .cc{ background-color: transparent; overflow: hidd ...

javascripthtmlcsssvg

Struggling with integrating Vue mixins into a Webpack / vue-loader setup

I seem to have encountered a minor issue. So far, everything has been compiling smoothly until I attempted to utilize mixins effectively. When creating and using a mixin within a single file component, there are no issues - it works perfectly. However, whe ...

vue.jswebpackvuexvue-loaderroots-sage

Assistance requested in structuring JSON data

I'm currently working on making my javascript code more dynamic. Here's what I have so far: data.addRows(2); data.setValue(0, 0, 'name goes here'); data.setValue(0, 1, value 1 goes here); data.setValue(0, 2, value 2 goes here); data. ...

javascriptjqueryjson

Discrepancies in collision box alignment causing ThreeJS SAT collisions to fail

Currently, I am working on developing a simple game project for my school. However, I have encountered an issue with the collisions in the game. The collision boxes appear to be misaligned. If you wish to see the game I am working on, you can access it he ...

javascriptthree.jscollision-detection

How can I create an accordion panel that can be toggled using

I've been working on creating an accordion panel using CSS with a touch of JavaScript. Everything seems to be functioning correctly except for the toggling of the panels. Essentially, when one panel is clicked, I want all other open panels to close. ...

javascriptcss

JavaScript client receives a response from the server

After filling out an HTML form and submitting it, the client validates the data (such as checking if the EULA checkbox is accepted) before sending it to the server. The server then checks the data and returns a status code. But how can I retrieve this stat ...

javascriptnode.jsexpressserverclient

vue-router: Maintaining routing consistency despite argument changes

I am currently working on verifying the unsaved form route before leaving, and in case the user declines, I want to prevent changing the route. Most of it is functioning properly with beforeRouteLeave: function (to, from, next) { ...

javascriptvuejs2vue.jsvue-router

Obtaining a JSON reply using Ember

Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...

javascriptjqueryajaxjsonember.js

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

Exploring the power of AngularJS with ng-click functionality and utilizing services

As a beginner in AngularJS, I am facing a knowledge gap when it comes to integrating a barcode scan feature into my application. What I want to achieve is quite simple - a button in the view that, when clicked, triggers a barcode scan. Once the scan is com ...

javascriptangularjsangular-promise

Having trouble with the form parsing not functioning properly

I have been utilizing Express.js along with the body-parser module for form parsing on the server. However, I am facing an issue where the content received appears as an empty object under res.body. This is how my app.js looks: var express = require("exp ...

javascriptjsonnode.jsexpresspug

What steps are involved in extracting post data from the javascript DOM using php?

Having an issue where my JavaScript sends data to PHP, but the parsing in PHP keeps failing. The data is received by PHP and displayed in a text area, however, it needs proper formatting before being parsed. Can anyone advise on how to correctly format the ...

javascriptphpjsonurldecode

I'm looking for the configuration of function definitions for the Jasmine npm module within an Angular project. Can

When a new Angular project is created, the *.spec.ts files provide access to Jasmine functions such as "describe", "beforeEach", and expect. Despite not having an import clause for them in spec.ts files, I can click on these functions and navigate to their ...

angulartypescriptnpm

Error Encountered during Deployment of Custom React App on Heroku due to Fetch API Issue

After developing a small app using React without CRA, I successfully deployed it to Heroku. However, I encountered an issue where a static JSON file that I created isn't fetching properly (it works fine on my local machine). Upon encountering this pr ...

javascriptreactjsexpressheroku

Storing and accessing JavaScript arrays in a local JSON file

I am working on a school project and any assistance would be greatly appreciated. Upon execution in a browser like Chrome, the array below gets populated with data. I am trying to determine how to store or update this array in a local file. var listData ...

javascriptarraysjson