What is the best way to utilize yarn in order to install a GitHub package that utilizes TypeScript and has not yet been compiled?

After making modifications to an npm package and using yarn link <project name> locally, everything works perfectly. However, when pushing it to GitHub and trying to add it to the project with

yarn add <repo url>#<branch>
instead of yarn link, a compilation error arises, indicating that the TypeScript/ES6 code has not been compiled:

 SyntaxError Plugin: Unexpected token *

This error specifically points to the line in the added package:

import * as path from 'path'

The question remains: How can I make yarn add compile the TypeScript/ES6 code on-the-fly from the GitHub version, similar to how yarn link handles the local version?

I would prefer to avoid building and committing the compiled results to git, as that introduces an extra compilation step every time, which could potentially be overlooked by myself or others.

To clarify, I am not publishing these changes to npm, as this involves a forked package that is not owned by me.

Answer №1

It is essential to generate files during the development process.

Inside this particular repository, make sure to execute yarn build (or any other necessary build command) regularly. It should be done each time after updating a package using yarn upgrade package-you-import.

If you need more detailed information, please refer to my response on How to have npm install a TypeScript dependency from a GitHub URL?.

Answer №2

yarn add simply creates links to the appropriate folders rather than compiling typescript/ES6 on-the-fly. If you are using yarn add from GitHub, you can easily import from the repository's src directory:

import * as repo from 'repo/src';

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

What is the method for generating HTML output in various languages with gulp-data?

Here is the content of my gulp file: var gulp = require('gulp'); var posthtml = require('gulp-posthtml'); var mjml = require('gulp-mjml'); var nunjucksRender = require('gulp-nunjucks-render'); var data = require(&ap ...

Ways to reveal heavily nested components when the Angular change detector fails to detect them

A particular component called Grid has been implemented with the following template: <div *ngFor="let row of item.rows"> <div *ngFor="let col of row.cols"> <div *ngFor="let grid of col.items"> < ...

Rule in Eslint for Typescript that enforces explicit typing and prohibits the use of implicit "any

Starting a fresh typescript project with eslint, I'm facing an issue in setting up eslint rules for the tsc command to run smoothly without errors. Specifically, I'm encountering difficulty with the "noImplicitAny" rule defined in tsconfig.json, ...

How can I retrieve the /api/auth/me resource serverside using the NextJS AppRouter?

I am looking to implement app router in my Next.js project and have encountered an issue. In order for my app to function properly, I need to make a call to /api/auth/me which will return either a user object or null if the user is not logged in. To achiev ...

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

I'm having trouble with Angular pipes in certain areas... but I must say, Stackblitz is truly incredible

Encountering this issue: ERROR in src\app\shopping-cart-summary\shopping-cart-summary.component.html(15,42): : Property '$' does not exist on type 'ShoppingCartSummaryComponent'. The error disappears when I remove the c ...

Configuring environment variable within package.json

I am facing a challenge with setting a single environment variable during the preinstall phase. This variable is crucial for fetching a private package using my npm token stored in .npmrc. The env var is actually stored within a config service (Firebase) a ...

When I attempt to add yarn using `yarn add`, the entire directory receives a "cannot find module" error message from nodeJS

I'm currently working on a project for a login web application in a folder named 'login.' To start off, I used yarn add to set up my project and include all the necessary packages. However, when attempting to run the project using node ., an ...

The ReactJS website is encountering issues when attempting to build in AzureDevOps, despite functioning properly

My reactJS App functions properly when run locally, but there are build failures when the same code is built using a pipeline on AzureDevOps. Could someone please explain why this might be happening? Here are the npm run build task logs from the build in ...

Error setting package type in the artifactory

I've encountered an issue while setting up a local npm repository cache system in Artifactory. When I try to add a new remote repository, the option to select npm as the package type is not available. How can I resolve this issue? ...

Retrieve the Typescript data type as a variable

I have the following components: type TestComponentProps = { title: string; } const TestComponent: React.FC<TestComponentProps> = ({ title, }) => { return <div>TestComponent: {title}</div>; }; type TestComponent2Props = { bod ...

Typescript disregarding conditional statements

Looking for some assistance with a Next.JS React-Typescript application Here's my code snippet for handling the video HTML element const videoRef = useRef<HTMLVideoElement>(); useEffect(() => { videoRef !== undefined ? videoRef.current. ...

Encountering difficulties resolving the dependency tree while trying to install @react-navigation/[email protected]

After creating a new project called MyProject using react-native init MyProject, I opened it in VSCode and the first task was to install navigation. Initially, when running npm install @react-navigation/native @react-navigation/stack, it threw an error. S ...

Arrangement of code: Utilizing a Node server and React project with a common set of

Query I am managing: a simple react client, and a node server that functions as both the client pages provider and an API for the client. These projects are tightly integrated, separate TypeScript ventures encompassed by a unified git repository. The se ...

Is there a way to make the Sweetalert2 alert appear just one time?

Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...

Bringing in information from a TypeScript document

I'm having trouble importing an object from one TypeScript file to another. Here is the code I am working with: import mongoose from "mongoose"; import Note from './models/notes'; import User from './models/users'; import ...

"Utilizing an if-else statement within a forEach loop

I have an array of ages and I want to determine the age range for each age along with the count, then push it into my object. The issue I am facing is that if there are multiple ages in the same range, it gets pushed twice. I only want to push it once and ...

What are the steps to resolve routing issues within an Angular component integrated into an ASP.NET Core web application?

When it comes to routing in Angular, I have been following the Angular tutorial from documentation. My example application integrates Angular components with an ASP.NET Core 2.2 web app, and these components are displayed within .cshtml views. I use Angul ...

Issue with data not being recorded accurately in React app after socket event following API call

The Application Development I have been working on an innovative app that retrieves data from the server and visualizes it on a chart while also showcasing the total value in a Gauge. Additionally, the server triggers an event when new data is stored in t ...

The seamless union of Vuestic with Typescript

Seeking advice on integrating Typescript into a Vuestic project as a newcomer to Vue and Vuestic. How can I achieve this successfully? Successfully set up a new project using Vuestic CLI with the following commands: vuestic testproj npm install & ...