Using Browserify on files that have already been browserified

When trying to use browserify to require an already browserified module, I am running into an issue where the bundle cannot resolve the module that has already been browserified.

For instance, I have a file called bundle-1.js that was bundled using the command:

browserify -r ./bundle-1:bundle.one > build/bundle.one.js

Then, I have another file named bundle-2.js that uses require('bundle.two'), and is bundled with the command:

browserify -r ./bundle-2:bundle.two -x ./build/bundle.one.js > build/bundle.two.js

However, when attempting to run the last command, I receive an error stating Cannot find module 'bundle.one'.

How can I expose the modules from bundle-1 for bundle-2 to use with the module name bundle.one?

I have created a repository for this example which can be found here: https://github.com/kand/browserify-bundling-tests

Answer №1

The reason for this issue is that the browserified bundle is already enclosed within browserify and lacks the typical node.js module structure (commonjs, with require() and exports statements). One potential solution is to designate the previous bundle as a global library that exports an object in the browserify configuration.

To implement this solution, follow a process similar to importing any other global library, as explained here.

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

The operation was computed twice

Below is an example: test.html <!DOCTYPE html> <html ng-app ng-controller="AppController"> <head> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="script1 ...

Replace the phrase "add to cart" with "plus" and "minus" in Opencart

I am trying to customize the Add to Cart functionality in OpenCart 2.0.1.1 by replacing it with plus and minus buttons. I have successfully added the plus button, however, I am facing difficulty coding for the minus button. The code snippet below shows w ...

Discovering the most recent update date of Node packages

I recently noticed that one of the node dependencies my project relies on has been updated since a few days ago. The update caused my test suite to fail, even though I haven't made any changes to my code or package.json in that time. It seems like NPM ...

Guide on transferring an array with a specific key to a function parameter (Dealing with multidimensional arrays)

While this question may seem a bit random, it actually does make sense - at least to me. Let's consider a multi-dimensional array named temporaryFrequency. I want to create a function that takes one argument - frequencyArray[number]. Let's have a ...

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

As I work on developing an application for a client, my focus is on creating a web service using Laravel5 for the backend. To enhance the user interface of this web service, I have chosen to incorporate the Smart Admin Theme, specifically utilizing the Aja ...

Tips for eliminating the left and bottom border in a React chart using Chart.js 2

Is there a way to eliminate the left and bottom borders as shown in the image? ...

Displaying [object Object] in Angular Material datatable

I am currently working on implementing a datatable component using Express and Firebase DB. Below is the service request data: getText() { return this.http.get<nomchamp[]>(this.url) .map(res => { console.log(res); return res }); ...

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Imagine a scenario where I have a page located at: www.mydomain.com When a user clicks on a button, it triggers the opening of a new window using: newWin = window.open("https://www.otherdomain.com","a","height=800,width=1000"); Now, my objective is to m ...

Navigate through stunning visuals using Bokeh Slider with Python callback functionality

After being inspired by this particular example from the Bokeh gallery, I decided to try implementing a slider to navigate through a vast amount of collected data, essentially creating a time-lapse of biological data. Instead of opting for a custom JavaS ...

Linking states using AngularJS and jQuery

Imagine I have a scenario with two different states: .state('page1', { url: '/page1', templateUrl: 'pages/templates/page1.html', controller: 'page1' }) .state('page2', { url: '/page2& ...

Convert the class to a file upload using jQuery

I am currently working on a project involving a file upload script. I have multiple directories where the files need to be uploaded, and I'm attempting to use a single form for this purpose. So far, I have been able to change the form class using jQu ...

Identifying an anonymous function with a name (using .name versus .displayName)

In the context of my react native project, I have come across a function with an undefined name that is not being inferred. This function looks like: const f = function() {}; Despite maintaining its anonymous definition, there is an attempt to assign a na ...

Monitor Socket IO for client disconnection events

I am facing an issue where I need to identify when a user loses connection to the socket. It seems that socket.on("disconnect") is not triggering when I simply close my laptop, leading to the ajax call not executing to update the database and mark the us ...

HTML stubbornly resists incorporating Javascript [UIWebView]

Currently, I am facing an issue while trying to animate a color property using jQuery 1.7.1 and the jquery color plugin downloaded from this link. I have ensured that all necessary files are included and part of the build target. Here is a simplified versi ...

Creating a stunning display of six video textures on a cube through the power of three.js

My current project involves working with a video that has been segmented into six parts. Here is a screenshot of the input video. The goal is to project these 6 videos onto the six faces of a cube using JavaScript: <!DOCTYPE html> <html> &l ...

Experiencing difficulties with $watch in my Angular controller

Having trouble getting a $watch function to work properly while testing a controller. In this scenario, the goal is to display ctrl.value in either ARI format or AEP format, but the underlying $scope.model is always kept in the ARI format. When ctrl.value ...

Tips on validating multiple forms with the same name in AngularJS

Hello, I am seeking a way to check the validity state of all forms outside of the form tags. For example, if any form is invalid, I want an error message to be displayed. The use of myform.$invalid doesn't seem to work for all forms or update properly ...

The potential weakness that arises during the installation of react-scripts

After installing react-scripts, I discovered a total of 58 vulnerabilities, including 16 moderate, 40 high, and 2 critical threats. Here is a breakdown of my setup: Operating System: Linux Debian 10 Node.js version: v14.18.1 Npm version: 8.1.0 React versi ...

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

I am currently working on creating a form and faced with the challenge of simplifying my code using a function. Specifically, I want to write JavaScript code that will check all input fields in the form to ensure they are filled. If any field is left emp ...

Is it possible to utilize a distinct node module according to the specific environment?

I currently use an npm package for multiple projects. Whenever I need to make a change that affects the npm package, I have to go through the process of making the change, submitting a pull request, waiting for it to be merged, and then testing the changes ...