Solving a React app's dependency problem with Yarn workspaces

Currently, I am in the process of constructing a complex multi-module project using create-react-app, TypeScript, and Yarn workspaces.

The layout is as follows:

package.json
packages
  - create-react-app-project
  - other-lib-project
    - tsconfig.json
    - package.json
    - src/
    - dist/

Although the lib project builds successfully, I encounter an error upon running it:

Unhandled Rejection (TypeError): Cannot read property 'random' of undefined

In this case, "random" refers to a property within the faker library. After compilation, the import statement for faker shows up like so:

var faker_1 = require("faker");

I initially assumed that webpack would bundle all dependencies of my library when compiling the create-react-app project, but it seems this is not happening as expected.

What steps do I need to take in order to correctly bundle my library with its dependencies so they are available at runtime in the browser?

typescriptcreate-react-appyarn-workspaces

Answer №1

To address this issue, I decided to include the library project in the paths specified in the tsconfig.json file of my main projects. For example:

{
  "compilerOptions": {
    "paths": {
      "@my-namespace/main-project": ["./src"],
      "@my-namespace/lib-project": ["../lib-project"]
    }
}

By doing this, the compiled library assets are utilized from the build folder while still ensuring that the necessary modules are bundled in the main build.

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

Jodit-React: Addressing the Placeholder Problem

I've recently incorporated Jodit-react into my react-typescript project, but I encountered an error when adding the config property. The error message stated that it "Has no property common with type." Unfortunately, I'm unsure why this is happe ...

reactjstypescriptjodit

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

javascripttypescriptelectronwebdriver-iospectron

Exploring the Magic of Class Variable Destructuring in React

Is there a simpler method to break down a prop object and assign them to variables of the same name in the class? I am familiar with ({ first: this.first, second: this.second, } = props) however, it can get complicated when dealing with numerous variable ...

javascriptreactjstypescript

What causes the discrepancy in values displayed by enums in TypeScript when assigned integers in reverse order?

Recently diving into the world of TypeScript, I've been experimenting with different types in this language. One interesting data type I played with is enums. Here's an example of code I used: enum colors {red=1,green=0,blue,white}; console.lo ...

typescriptenums

Error: Import statement is invalid outside of a module in next.js

Every time I attempt to run the register.tsx page in my next.js project, I encounter the error message shown below. My Next.Js project utilizes TypeScript. import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import st ...

node.jstypescriptnext.js

Ways to fix a TypeScript syntax-checker error in Visual Studio

I am currently facing an issue while attempting to showcase an array using Angular and TypeScript. The error message that I encounter is quite perplexing and I am unsure of its meaning. Upon hovering my cursor over the Goal that is underlined in red, the ...

angulartypescript

Ways to identify modifications from a BehaviorSubject and automatically trigger a response according to the updated value

I am currently implementing a BehaviorSubject for managing languages in my Angular project. I am also utilizing Angular Datatables and trying to dynamically change the language displayed in the data table based on the value returned from the subscription. ...

angulartypescriptrxjsangular-datatablesbehaviorsubject

Tips on invoking a child component's function from the parent component

I'm struggling to comprehend, Is there a way to trigger a function within a child component by clicking on a button in the parent component? ...

angulartypescriptparent-childcommunication

Restoring scroll position in Next.js when the page is reloaded

Problem Description I am facing an issue with the sticky header functionality I have implemented. It relies on a useEffect hook to monitor its scroll Y offset state. However, when I reload the page, it fails to detect the position until I manually scroll ...

reactjstypescriptnext.js

strange complications with importing TypeScript

In my Typescript projects, I frequently use an npm module called common-types (repository: https://github.com/lifegadget/common-types). Recently, I added an enum for managing Firebase projects named FirebaseEvent. Here is how it is defined: export enum Fi ...

typescript

Navigate using an abstract data type

I am looking to transmit abstract data (In Angular 4 or 5) from one component to another without it being visible in the url. Currently, I am using the following method: let navigationExtras: NavigationExtras = { queryParams: { "firstname": "Nic ...

angulartypescript

Issue: "Your cache directory includes files owned by root, caused by a bug in the earlier versions of npm that has now been fixed"

Just recently, I completed the installation of Ubuntu 18.04 Stable version on my system. Along with that, I also installed the latest stable versions of Node.js (v12.16.1) and npm (v6.13.4). However, while attempting to install "create-react-app" using "n ...

node.jsnpmnode-modulescreate-react-appnpm-install

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

javascriptangulartypescriptrxjsangular2-observables

Modifying SASS variable within an Angular 2 TypeScript project

How can I update the Sass color variable based on user input in Angular 2? I came across a helpful resource, but it doesn't include any examples specifically for Angular 2. Any assistance would be greatly appreciated. Thank you! ...

typescriptsassangularionic2

Struggling with creating a generic TypeScript structure?

My goal is to manipulate data structured like this: const exampleState = { elements : { element1: { values: { value1: 10, value2: 10, }, elementDetails : { detail1 : { values: { value1: ...

typescript

Leverage the globalDependencies feature in Angular2 to utilize Typescript tsd files

I am attempting to incorporate typescript tsd's from DefinitelyTyped into an Angular2 project (RC.0), but encountering issues with loading global dependencies properly: typings install --save dt~hellojs --global --save npm install --save hellojs Her ...

typescriptangular

Sending the :id parameter to the Service component

In the early days of my Angular journey, I have a simple question. Currently, I am utilizing the WordPress REST API to showcase a list of posts from a specific category by using posts?categories={ID HERE}. However, I am facing an issue in passing the ID f ...

angulartypescriptwordpress-rest-api

What is the proper error type to use in the useRouteError() function in react-router-dom?

In my React project, I am utilizing the useRouteError() hook provided by react-router-dom to handle any errors that may arise during routing. However, I'm uncertain about the correct type for the error object returned by this hook. Currently, I have ...

javascriptreactjstypescriptreact-routerreact-router-dom

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

disclaimer: I am a bit uncertain about variance in general... Here is the scenario I am facing: // index.ts import express from 'express'; import {Request, Response} from 'express'; const app = express(); app.use(handler); interface ...

typescriptexpresscovariancecontravariance

In TypeScript, the 'as const' syntax results in a syntax error due to the missing semicolon

I incorporated the following code into my react project: export const animation = { WAVES: "waves", PULSE: "pulse", } as const; export type Animation = typeof animation[keyof typeof animation]; Upon running the project, I encounte ...

reactjstypescriptsyntax-error