Resolving Modules: Using NPM to Install the Typescript Package Directly from Github

Recently, I decided to branch out and customize an existing npm package built in TypeScript to cater specifically to my unique requirements.

I discovered that I could also install packages from GitHub branches using npm without any issues.

However, after forking the repository, I encountered a problem with module resolution. While the original package worked flawlessly with the same setup, the modified version failed to do so despite no changes being made.

I suspect that the issue lies with the type definitions. I attempted to resolve it by running npm i @types/<name>, where <name> matches the original package name. Unfortunately, it seems that the definitions are not included within the package itself.

What steps should I take to ensure everything functions as intended? The process is starting to feel overly complex for such a seemingly simple task.

Here's the error message I encounter during compilation:

TypeScript Error
Cannot find module '<name>'
typescriptgithubnpmmodulepackage

Answer №1

To address this issue, consider directly importing from the /src directory using the following syntax:

import ComponentName from 'package-name/src';

I encountered a similar scenario when I attempted to use a fork of a GitHub repository available at repository-name. Upon inspecting the contents of the node_modules folder, I observed that only a /src directory existed, while the expected /lib directory specified in the main field of the package.json was missing. This discrepancy may be attributed to the build process configuration, as the npm run build script might not have been triggered correctly, resulting in the absence of the /lib folder.

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

Error: The specified function in the schema is not valid for the current operation mode

I'm facing an issue with validating a material ui form using Formik and Yup. The error keeps popping up. This is the schema I imported from another file: export const validationSchema = Yup.object({ email: Yup.string() .email('Invalid Ema ...

javascriptreactjstypescriptformikyup

Resolving the problem of <Link> error in React with Typescript using react-router-dom

Currently, I am facing an issue with the 'react-router-dom' library. This is my first experience using React with Typescript; Everything was functioning properly until I introduced the from 'react-router-dom', which caused the entire ...

reactjstypescriptdom

Leveraging NPM Workspaces for projects containing multiple @prisma/client dependencies

In my configuration, I have set up a monorepo structure that resembles the following: project node_modules packages my-first-project prisma schema.prisma my-second-project prisma schema.prisma Both of my projects (my-first-project and my-second ...

npmprismanpm-workspaces

Accessing global modules path in node scripts is a challenge in node.js

I am setting up a WordPress website with custom mu-plugins and a custom theme, all of which have gulp build processes and rely on the same npm packages. To streamline my workflow, I decided to install these npm packages globally so that a root-level node s ...

node.jsnpmnpm-scripts

parsing a TypeScript query

Is there a simpler way to convert a query string into an object while preserving the respective data types? Let me provide some context: I utilize a table from an external service that generates filters as I add them. The challenge arises when I need to en ...

javascripttypescriptqs

Is the Angular Library tslib peer dependency necessary for library publication?

I have developed a library that does not directly import anything from tslib. Check out the library here Do we really need to maintain this peer dependency? If not, how can we remove it when generating the library build? I have also posted this question ...

javascriptangulartypescriptangular-cliangular-library

Messing up Bootstrap ES6 JavaScript code leads to the problem of the "Modal redeclared" error

Encountering the issue of "Modal redeclared" when attempting to minify Bootstrap 4 JS code using Grunt. Discovered these are due to ES6 so found the ES6 Uglify for Grunt. Current dependencies include: "bootstrap": "~4.0.0", "grunt": "~1.0.1", "grunt-contr ...

npmgruntjsbootstrap-4es6-modulesgrunt-contrib-uglify

Using a private NPM module from a Git repository on Heroku

As I attempt to deploy my app to Heroku, I am facing an issue due to my reliance on private git repos for modules. This dependency is crucial for code reuse across various projects, such as a custom logger used in multiple applications. "logger":"git+ssh: ...

node.jsherokunpm

The ArgsTable component is not displayed in Storybook when using Vite, Typescript, and MDX

I'm struggling to display the table with props on a MDX documentation page. No matter what I try, the table only shows: "No inputs found for this component. Read the docs >" Despite trying various methods, I can't seem to get it to work. I h ...

reactjstypescriptstorybookvite

Inquiring about the application of spread argument in TypeScript

Here is some code I'm working on: import _ from 'lodash'; function test(num1: number, num2: number) { console.log(num1, num2); } test(..._.take(_.shuffle([0, 1, 2]), 2)); I encountered a TS2556 error while using the TS playground and ...

typescriptlodashspread-syntax

Interop-require-default is nowhere to be found in the babel-runtime

I'm really stuck on how to resolve this error. I've tried searching online and followed the suggestions given by others. I even went as far as deleting 'node_modules' and reinstalling, but nothing seems to be working. The specific erro ...

javascriptnpmecmascript-6babeljs

Sending Component Properties to Objects in Vue using TypeScript

Trying to assign props value as an index in a Vue component object, here is my code snippet: export default defineComponent({ props:{ pollId:{type: String} }, data(){ return{ poll: polls[this.pollId] } } }) Encountering errors wh ...

typescriptvue.js

"Need to update the host for Vue-CLI's hot reload endpoint (sockjs)? Here's how

What is my current setup: vue-cli app running in a virtual machine with vue --version 3.7.0) Laravel Homestead v8.3.2 Vagrant 2.2.4 VirtualBox Nginx vue.config.js: module.exports = { devServer: { host: 'myvueapp.local', https: true ...

nginxnpmvagrantvirtualboxvue-cli-3

What steps can be taken to resolve the error "Incompatible types: TodoItem undefined cannot be assigned to type TodoItem"?

I am currently in the process of learning TypeScript. Here is what's inside todoItem.ts: export class TodoItem { constructor( public id: number, public task: string, public complete: boolean = false ) {} printDetails(): void { ...

javascripttypescript

Error: Please specify the upstream proxy port for the Yeoman generator

Currently, I am facing an issue while attempting to build a project with the Yeoman generator. The error message that keeps popping up is quite frustrating. https://i.stack.imgur.com/rPV71.png Despite trying to troubleshoot by uninstalling and reinstalli ...

node.jsnpmyospfx

Error: Unable to access the 'filter' property as it is undefined. TypeError occurred

findLoads(){ if(this.loggedInUser.userFullySetupFlag === 0 || this.loggedInUser.businessFullySetupFlag === 0){ swal( 'Incomplete Profile', 'To find loads and bid, all the details inside User Profile (My Profile) and Business Profil ...

angulartypescript

Local modules vs production modules in npmWhen working with npm

We are developing two modules that are dependent on another module. The relationship is like A -› B and C -› B I have explored some possible solutions: Using npm link ../projectC from projects A, B Pros: Creates a symlink, so any changes made t ...

node.jsmodulenpm

Is there a way to track the loading time of a page using the nextjs router?

As I navigate through a next.js page, I often notice a noticeable delay between triggering a router.push and the subsequent loading of the next page. How can I accurately measure this delay? The process of router push involves actual work before transitio ...

reactjstypescriptperformanceloggingnext.js

WebStorm does not seem to recognize NPM, leading to the inability to access previous commands

I currently have node and npm installed on my Mac, and they work fine in the regular terminal. However, in my Webstorm (Ultimate version) terminal, they are not recognized. Here is the output I am getting: $ node /bin/ksh: node: not found $ npm /bin/ksh: ...

node.jsnpmwebstormjetbrains-ide

AngularJS Constants in TypeScript using CommonJS modules

Let's talk about a scenario where I need to select a filter object to build. The filters are stored in an array: app.constant("filters", () => <IFilterList>[ (value, label) => <IFilterObject>{ value: value, label: label } ]); i ...

javascriptangularjstypescript