The import of a package installed from git is not possible with Webpack

After forking a package in git and making my changes, I proceeded to install it using the following command in my terminal:

npm install --save git+https://github.com/hayk94/ddp.js.git

Once installed, I attempted to import the package in my code with this line:

import DDP from 'ddp.js'

Unfortunately, webpack threw an error at me:

ERROR in ./main.js
Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib'
 @ ./main.js 23:11-28
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./main.js
webpack: Failed to compile.

Oddly enough, if I install the package from npm, webpack works just fine. Is there another way to handle packages installed through git repositories?

Answer №1

The starting point for the package is located at lib/ddp.js, even though the actual file does not exist in the repository. It's a common practice for libraries to build their files before publishing to npm, allowing them to utilize newer JavaScript features while still catering to older versions that may lack support. This process is typically facilitated by the prepublish hook, which automatically executes before the package is published (when running npm publish). By doing this, the built files are not included in the repository to avoid unnecessary clutter in your commits. Although some individuals opt to include these files for direct use, this approach is becoming less common due to services like Unpkg that serve the purpose more efficiently.

There are various ways you can work with the git repository:

  • Commit the built files.
  • Generate the files post-installation either manually or through a postinstall hook. (not recommended)
  • Modify the entry point to src/ddp.js. If transpiling is required, this option may not be suitable unless you whitelist the package in your webpack configuration for transpilation (assuming you exclude node_modules from the process).
  • Publish the package to npm under your namespace (@yourusername/ddp.js) and utilize it from there. Refer to Working with scoped packages for more information.

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

Troubleshooting: Issues with Adding a New Row in Datatables using JQuery

CSS : <div class="datatable-header"> <button type="button" name="add" id="add" class="float-right btn btn-info">Add</button> </div> <div class="table-responsive"> <table ...

Numpad functionality in JQuery malfunctioning post-ajax request

Using the jQuery numpad plugin has been flawless until after an AJAX call. I have tried various functions like on('click') and others, but unfortunately, none of them worked as expected. Apologies for my poor English! You can find the extension l ...

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

Download files from Firebase storage to a user's device

I have a variety of files such as images, videos, and audio stored in my firebase storage. My goal is to provide users with the ability to download these files to their computers by clicking on a download button. After reviewing the firebase documentation ...

Retrieving various properties of an object by matching IDs and displaying them without repeated reductions

I'm interested in finding a more efficient way to retrieve properties from a reduced object within a Vue component or wrapper DOM element. Let's say I have these two data objects in my component: player: [{ active: true, id: 0, name: &q ...

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

What is preventing me from accessing the variable?

Having some trouble using a variable from JSON in another function. Can someone lend a hand? async function fetchData() { let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d'); let data = await response.js ...

The Node.js Express framework is having trouble recognizing the npm command within the project directory

I've been encountering an issue while trying to install express via cmd on Windows. The problem arises when I attempt to install dependencies after successfully setting up express and creating a framework skeleton. It prompts me to install dependencie ...

Node.js Error: The object does not have the specified method

Recently, I dived into the world of node.js by following a fantastic tutorial on node.js, express, and mongodb from Howtonode. However, I encountered an error that doesn't seem to have been addressed in the comments section. The last comment was made ...

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

I am currently using a file upload script known as Simple Photo Manager. Whenever I upload multiple images and wish to delete some of them, I find myself in need of creating a variable called numDeleted (which basically represents the number of images dele ...

How can I identify when a form has been edited in order to update the database with those changes only?

Currently, I have a form with over 50 fields. While I've successfully implemented functionality for inserting, selecting, and deleting records, I'm struggling with updating a record. Specifically, if a user only updates one or two fields out of t ...

Error: When trying to initialize, an unexpected { token was encountered

Issue: While updating my Node.js version, I inadvertently broke my Node.js program. The problem is that I can't recall the previous Node.js version that was working fine before this happened. Error: When I try to run my program using node app.js, ...

Unexpected behavior observed with negated character: ? ^

I am looking to create a form where users can input their phone number and have the flexibility to choose how they want to separate the numbers. I have been using a regex pattern for validation: var regex = /[^0-9 \/-\\\(\)\+ ...

Unable to load CSS background image

As I develop a website for a fictional company to enhance my skills in HTML, CSS, and JavaScript, I am encountering an issue with loading my background image. If someone could review my code to identify the problem, I would greatly appreciate it. Check ou ...

Are you familiar with manipulating the JSON data array retrieved from an Ajax response?

Is it possible to handle a response from AJAX request in PHP? I'm not very familiar with JavaScript, so I'm struggling with this one. This is what I have managed to put together: var base_url = 'http://dev.local/westview/public'; $(& ...

An error was encountered with Ajax and JSONP due to an unexpected token causing a SyntaxError

Currently attempting to retrieve information from the host at 000webhost The data is in JSONP format: { "categories": { "category": [ { "name": "Android", "parent": "Computer Science", "ID": "2323" }, { ...

Is there a way to include this function in an array without triggering it right away?

In my coding project, I am working with an array of functions that return jQuery deferred AJAX objects known as phoneAjaxCalls. The main function called newPhone is where multiple calls are being pushed and it requires two arguments. function newPhone(tlc ...

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

I've begun working on a fantastic seed project that can be found at: https://github.com/AngularClass/angular2-webpack-starter However, I've encountered an issue with integrating third-party modules. Can anyone offer guidance on how to properly a ...

Using dangerouslySetInnerHTML in React within a Fragment

In my current project, I have a specific requirement where I need to format text in React and also include HTML rendering. Here's an example of what I'm trying to accomplish: import React, {Fragment} from "react"; import {renderToString} from " ...

Switch out a visual element for Dropzone.js

During my recent project, I utilized Dropzone.js for image uploads. However, I am now interested in transforming the dropzone area into an actual image. For instance, if there is a "featured image" attached to an article, users should be able to drag and ...