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?

javascriptgitnpmwebpack

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

Passing data as a parameter from the view to the controller using AngularJS

I am attempting to retrieve data from a view, which must be passed as a parameter in a function in order to populate an array in the controller. However, I am not receiving any objects in return. Here is what I have tried: VIEW <div ng-repeat="cssfram ...

javascriptangularjsparameterspush

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

javascriptjqueryhtmlcss

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

Trying to register the RCTBridgeModule class RCTFileReaderModule with the name 'FileReaderModule' failed because the name was already taken by the FileReaderModule class. This issue arises when attempting to launch an application on iOS using th ...

javascriptiosreact-native

Tips for resolving issues with mysql_fetch_assoc()

Similar Question: mysql_fetch_array() error - Fixing parameter issue Whenever I execute the code below, I encounter this issue: Warning: mysql_fetch_assoc(): provided argument is not a valid MySQL result resource If anyone knows how to rectify this pro ...

phpjavascriptmysqljson

When selecting the "Open Link in New Tab" option in Chrome, the Angular app's routing will automatically redirect to the login page

I am facing a peculiar issue in my Angular 2 application that I need help troubleshooting. Currently, the routing within my app functions as intended when I click on links to navigate between different components. Here is an example of how the routing path ...

javascriptangulartypescriptroutes

Iterating through JSON objects in JavaScript using 'Foreach'

After receiving a JSON Object from my PHP script, I am trying to extract specific data using JavaScript. { "Data":{ "Recipes":{ "Recipe_7":{ "ID":"7", "TITLE":"Wu ...

javascriptjqueryjson

My Vue build failed to incorporate the necessary function for outputting the .js file

While functioning properly in development mode, the build process seems to be excluding the setupToken function (from @/api.js) from the app.js output file. // App.vue //... import { setupToken } from '@/api export default { mounted () { this.se ...

vue.jswebpack

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

Methods for Addressing Absent SocketIO Session Data Within an Express Route Handler

My goal is to establish communication between Express and SocketIO on a nodejs server, allowing them to share session data. After conducting thorough research online, I discovered a potential solution at https://socket.io/docs/v3/faq/#Usage-with-express-se ...

javascriptnode.jsexpresssessionsocket.io

Why doesn't angular generate ng-reflect-_opened="false" in its production build?

We are currently utilizing the following technologies (which cannot be changed in the near future): Angular 2 RC5 Angular CLI 1.0.0-beta.10 Material Design Side Nav Control Node 6.9.1 npm 3.10.8 Windows 10 When we compile the code (using ng serve with d ...

javascriptnode.jsangular

Integrate new functionality into the plugin's JavaScript code without directly editing the JS file

I need to incorporate a new function called 'setInputDataId' at the same level as the existing function '_select' in the plugin js file without directly modifying the file itself. I am seeking guidance on how to add this new function. ...

javascriptjquerytwitter-bootstrapjquery-pluginstwitter-bootstrap-3

establishing the dimensions of table data cells

I'm facing a challenge with setting the width and height for table data that changes dynamically based on different values. The dimensions of the table itself are not definite, so I need to find a solution. Here's the code snippet I'm curren ...

javascriptcsshtml

Troubleshooting issues with the 'date' input type feature on mobile devices

When I use the following code: <input type='month' ng-readonly='vm.isReadonly' required min="{{vm.threeMonthsAgo}}" max='{{vm.oneMonthAhead}}'/> I am experiencing some difficulties on mobile devices that do not occur o ...

javascripthtmlangularjsdate

zingcharts with multiple lines on x axis representing time

I am facing a rather interesting challenge with plotting data. I want to create a chart where time is the x-axis scale and multiple lines are plotted, each with varying time intervals between data points. While zingcharts has provided documentation on gene ...

javascriptjsonchartszingchart

Executing an external function on an element as soon as it is created in AngularJS: tips and tricks

I am looking to implement a function from an external library that will be executed on each item as it is created in AngularJS. How can I achieve this? Here is the code snippet of my application. var app = angular.module('app', []); app.contr ...

javascriptangularjs

I am unsure about how to properly implement the reduce function

I am struggling with implementing the reduce function in my code. I have data output from a map function that consists of two documents. For example, one document contains: key "_id":"AD" "values" { "numtweets" : 1, "hastags" : ...

javascriptjsonmongodbmapreduce

Only allowing designated email addresses to authenticate using Gmail Oauth

Is there a way I can limit logins by doing the following? I'm facing an issue where the page keeps reloading constantly after logging in once. function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('Name: ...

javascripthtmlgmail

deliver a promise with a function's value

I have created a function to convert a file to base64 for displaying the file. ConvertFileToAddress(event): string { let localAddress: any; const reader = new FileReader(); reader.readAsDataURL(event.target['files'][0]); reader ...

javascriptangulartypescript

Troubleshooting: Gatsby alias imports not functioning properly on Netlify

I encountered an error in the Netlify build logs: 2:24:32 AM: error Generating JavaScript bundles failed 2:24:32 AM: Can't resolve '@layout/PageContainer' in '/opt/build/repo/src/pages/how-it-works' 2:24:32 AM: If you're tryin ...

reactjswebpackgatsbyaliasnetlify

Retrieve the value of a JSON array containing only a single object using jQuery

In my project, I have a jQuery file and a PHP file. If the PHP file successfully completes the process, it returns the value 2 using `echo json_encode(2)`. I am able to catch this value in the jQuery file and display a string on an HTML div without any iss ...

javascriptphpjqueryarraysjson