What is the best way to package a UI library in a monorepo?

After dedicating a significant amount of time to unraveling this issue, I find myself at a standstill.

Incorporating Turbo as a monorepo, I utilized the create-turbo@latest command, outlined in detail here.

While the default ui/package functions properly, I am hesitant to manually export everything in the package.json as shown below (view source code here):

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
    ... // Remaining content remains unchanged

Referencing Steven Tey's Dub.co for guidance, I opted to utilize TSUP to compile my UI library. Despite mirroring his configurations down to the tsconfig, I continue to encounter errors within my web app due to the UI library not being recognized and certain components malfunctioning. These components have functioned flawlessly across various projects for years, only revealing issues within the monorepo environment.

Additionally, adjusting my ui library's package.json to specify "src/index.tsx" as the entry point, where all exports/imports are consolidated, results in error messages such as:

// Error message here...

Irrespective of how meticulously I configure the ui library's package.json file, tsconfigs, or TSUP settings, I remain besieged by a cascade of errors.

The attempts made to bundle the UI library prove futile. Is there anyone who has achieved this successfully without encountering similar challenges?

Answer №1

Make sure your exported file is located in the root directory. Update src/index.tsx to ./index.tsx.

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

Compiling Directives in AngularJS for Faster Page Loading

I'm currently experiencing performance issues in my Angular application. The root cause seems to be the excessive use of a directive on a single page. Unfortunately, I don't have the time to break down this page into multiple sections. I am seek ...

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Here is my original source code: <a onclick="pd(event);" tabindex="0" issprite="true" data-ctl="Icon" style="overflow: hidden; background: transparent url("webwb/pygridicons_12892877635.png!!.png") no-repeat scroll 0px top; width: 16px; height: 16px ...

What is the method for accessing the value of variable "a" in the following code?

request(target, function (err, resp, body) { $ = cheerio.load(body); links = $('a'); $(links).each(function (i, link) { if ($(link).text().match('worker')) { var a = $(link).attr('href').toStri ...

What is the best way to display JSON data within a React component?

Is there a way to display JSON data in a react component by rendering each array as a separate unordered list? Here is the JSON Data: "value":{ "h3":[ "Best selling products", "Best Corporat ...

Ways to dynamically fetch data in JavaScript from PHP

Looking to retrieve dynamic values from PHP within JS in a flexible manner. To explain further, I'll first display the image then the code: https://i.sstatic.net/hhaX6.png <div id=""> <table border="1" width="820" style="margin-left:15px;" ...

Transform CSV data into JSON format to generate an empty JSON file

I've been attempting to convert a CSV file to JSON using the convert-csv-to-json package from npm. Although I can successfully retrieve the CSV file from the specified URL and create a 'data.csv' file, the resulting JSON file is only an empt ...

troubles encountered setting up karma, jasmine, and phantomjs using npm on ubuntu

Attempting to set up an Angular project using Yeoman, I followed the instructions on the Yeoman site to install grunt-cli, bower, and angular-generator. However, when running the grunt build command, it failed with unmet dependency errors. npm WARN EPEERI ...

Export an array of objects using the Angular XLSX library

Here is my example data: exampleData: any[] = [ { "id": "123", "requestType": "Demo", "requestDate": "12/05/21", "status": "Success", "product": [ { "productName": "example product A", "productQty": "8" ...

The issue with Angular 1.6 not displaying the scope value in the template

Hey there! I'm currently working on index.html Here's the code snippet from before: <body ng-app="MainController"> <div class="page page-base {{ pageClass }}" ng-view> </div> </div> Then, I made changes by ass ...

When the DOM elements have already been rendered, document.querySelector() will return null

I have been working on creating an automated Puppeteer script to download my monthly bank transactions from the bank's website. However, I have encountered a strange error (refer to the attached Imgur link for images of this issue) https://i.sstatic ...

Understanding ReactJs component syntax: Exploring the nuances and distinctions

Currently diving into the world of Reactjs and working on creating a basic component. I'm puzzled about why this particular syntax for a component: import React, { Component } from 'react'; export default class AboutPage extends Component { ...

Animate CSS during page load

Currently, I am implementing AJAX to dynamically load pages on my website. During the loading process, I wish to incorporate a spinning animation on the logo to indicate that content is being fetched. The jQuery script (although I'm still learning an ...

Executing javascript after an AJAX call within an on() method: Tips and tricks

I am struggling to make a $.ajax() call within a function triggered by the .on() method, in order to execute a script on a .click() event after updating newly appended data. I have tried numerous times to troubleshoot, but I can't seem to pinpoint the ...

Having trouble with transferring JSON data as a string from POSTMAN to a node server

My JSON data structure is as follows: const json = { "name": "Peter", "age": 21 } After calling JSON.stringify(json), the result is: '{"name":"Peter","age":21}' I am currently us ...

Using Vue to change select box data separately

I have a functional select box that is currently sending the selected value to a method when the change event occurs. However, I am wondering about something: Let's say I also want to send the cat_id value at the time of selection (to create an objec ...

Tips for showing a limited number of results the first time in an AngularJS application

I am a beginner in AngularJS and Ajax requests. I created a demo where I make an Ajax request to get remote data and display it in a list. My goal is to initially show only 10 results when the page loads for the first time, and then load the next 10 result ...

How to display nested arrays in AngularJs

Within my array contacts[], there are multiple contact objects. Each of these contact objects contain an array labeled hashtags[] consisting of various strings. What is the best way to display these hashtags using ng-repeat? ...

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

Using Angular's built-in dependency injection with the $resource factory allows for

Question regarding Dependency Injection on factory resource: As far as I know, the following example is the recommended approach for injecting dependencies in Angular1: angular.module('myApp').factory('Resource', Resource); Resource. ...

The ideal way to efficiently await retrieved data in vue.js to ensure smooth integration in another function

Is there a way to properly handle the successful fetch event before executing the loadMarkers() method? I keep encountering an error because monitorsData.monitors is undefined. I attempted using await with fetch but I'm unsure of the correct usage. ...