The NX monorepo from @nrwl is unable to locate the .svgr configuration file within the lib directory

Recently, I started working with NX Monorepo that consists of 2 separate react applications. In order to share icons between these apps, I decided to create an icons library.

I made changes to the project.json file of the icons library and added a svg command as follows:

{
  "name": "icons",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/icons/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "svg": {
      "command": "svgr libs/icons/assets",
      "configurations": {
      }
    },
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/icons/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/libs/icons"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    }
  }
}

However, when I execute the yarn nx run icons:svg command, it throws the following error:

Directory are not supported without `--out-dir` option instead.
Warning: run-commands command "svgr libs/icons/assets" exited with non-zero status code

To resolve this issue, I modified the svg command to include the --out-dir option which enabled SVGR to successfully generate the icons.

Now, my next step is to instruct SVGR to use the provided .svgrrc file for configuration:

{
  "icon": true,
  "dimensions": false,
  "expandProps": true, 
  "typescript": true,
  "outDir":"src/",
  "replaceAttrValues": {
      "#000":"currentColor",
      "#292D32":"currentColor"
  }
}
typescriptvitemonoreponx-monoreposvg-rect

Answer №1

After conducting various tests and research, I discovered that by adding a svgr configuration file inside the nx.json file, it can work for me in the following way:

"namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/.svgrrc" // ===> I put .svgrrc inside of root folder
    ],
    "sharedGlobals": []
  },

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

Storing Global Types in Angular: A Better Approach

Imagine I possess certain universally applicable enums, interfaces, or extensive classes. For example: export interface LogMessage { code: number; message: string; } Where would be the optimal location to store them? What is considered the best pr ...

angulartypescript

Queries with MongoDB RegEx fail to return any matches if the search string contains parentheses

When trying to implement case-insensitivity using regex, it seems to work well for plain strings. However, if special characters like parenthesis are involved in the search query for the name, the database returns no results. For example, a search for "Pu ...

javascripttypescriptmongodbmongoose

Exploring the world of TypeScript interfaces and their uses with dynamic keys

I am hopeful that this can be achieved. The requirement is quite simple - I have 2 different types. type Numbers: Number[]; type Name: string; Let's assume they are representing data retrieved from somewhere: // the first provider sends data in th ...

typescriptoopinterface

Filtering an array of objects based on another array of objects in Angular2 through the use of pipes

I'm having trouble understanding how to use the angular pipe to filter an array of objects based on another array of objects. Currently, I have a pipe that filters based on a single argument. I am working with two arrays, array1 and array2, both cont ...

arraysangulartypescriptlambdafilter

Which event is triggered following the update of all values in reactive forms?

How can I properly emit an event in Angular (v.5 or v.6) after a specific input of a reactive form has been changed? Here are the approaches I have tried: (ngModelChange)="doSomething($event)" (HTML, basic event) (bsValueChange)="doSomething($event) ...

angulartypescripteventsangular-reactive-formsngx-bootstrap

Learn the process of sending a delete request to a REST API with Angular

Is there a way to effectively send a delete request to a REST API using Angular? I am attempting to send a delete request with an ID of 1 My current approach is as follows: this.http.delete(environment.apiUrl+"id="+1).subscribe(data => { }); The va ...

angulartypescript

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

reactjstypescriptbluronblurmui

Tips for setting values to the child component property in Angular 4

When I was using ngif, I encountered an issue with getting the element reference of the child component. After extensive searching, I discovered that in order to access the element, I needed to use view children instead of view child. While I am able to ge ...

angulartypescriptprimeng

Using TypeScript to transform types: Array of objects with keys Kn and values Vn to an object with keys Kn and values Vn

I am looking to create a function that can process tuples with a specific structure like so: type Input = [ { key: K1, value: V1 }, { key: K2, value: V2 }, { key: K3, value: V3 }, // ... { key: KN, value: VN } ] The function should then output ...

typescript

What is the best way to specify the return type of a currying function?

Check out this currying function I've implemented: export interface NewIdeaCardSubmit { title: string, description: string, categories: CategoryValues } const applyInputs = (title: string) => (description: string) = ...

typescript

Exploring the parent-child relationship of three components within Angular 2

Currently, I am developing a shopping cart using Angular 2. The application consists of two components - one for categories and another for product listings, both included in the main app component as children. However, I'm facing an issue where these ...

angulartypescriptangular2-template

The recursive component is functional exclusively outside of its own scope

I'm facing an issue where my recursive component is not nesting itself properly. The problem arises when I try to use the Recursive component inside another Recursive component. Although the root is correctly inserted into the Recursive component fro ...

typescriptvue.js

The issue at hand is that the Mongo Atlas model is in place, but for some reason,

I recently delved into using Next.js and I am a newcomer to backend technologies. I have successfully established a connection with MongoDB Atlas using Mongoose, however, the user object data from the post request is not being created as a document in th ...

reactjstypescriptmongodbnext.jsmongodb-atlas

Tips for automatically creating a categoryId using ObjectId for a category in Nest JS, Typescript, and Mongoose

book.entity.ts import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose'; import mongoose, { Document } from 'mongoose'; import { Category } from 'src/category/entities/category.entity'; export type BookDocument = Book & ...

typescriptmongodbnestjs

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

What is the best way to create a universal limitation for a larger collection of a discriminated union?

Is it possible to enforce that when defining a generic class Foo<X>, where X represents a discriminated union type, X must be a superset of another discriminated union Y? In my specific scenario, I am utilizing a discriminated union to differentiate ...

typescriptgenericsdiscriminated-union

Creating cohesive stories in Storybook with multiple components

I need assistance with my storybook setup. I have four different icon components and I want to create a single story for all of them instead of individual stories. In my AllIcons.stories.tsx file, I currently have the following: The issue I am facing is ...

reactjstypescriptstorybook

Module 'xlsx' cannot be located

I encountered this issue while building with Jenkins on the server, but it works fine on my local machine without any errors: 15:07:39 "", 15:07:39 "", 15:07:39 "ERROR in src/services/excel.service.ts:2:23 - error TS2307: Cannot find module 'xlsx&apos ...

node.jsangulartypescriptnpmsheetjs

Optimal scenarios for implementing computed/observables in mobx

I understand most of mobx, but I have a question regarding my store setup. In my store, I have an array of objects as observables using TypeScript: class ClientStore { constructor() { this.loadClients(); } @observable private _clients ...

reactjstypescriptmobx