Paths in the tsconfig file will be automatically deleted upon launching the application

While setting up my project with CRA + Typescript, I configured the paths property in the tsconfig file to use absolute paths.

Everything seemed to work fine after my configuration. However, when starting my App using npm run start or running tests, I noticed that the paths property was automatically removed.

Below is a snippet from my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "src/*": ["./src/*"]
    }
  },
  "include": [
    "src"
  ]
}

I attempted to utilize the following approach in the test file:

import i18n from 'src/i18n/mocks';

Am I making a mistake in my configuration? Any assistance would be greatly appreciated. Thank you.

typescript

Answer №1

There's a clever solution to this problem.

  1. To prevent CRA from overwriting your configurations, you can create a new file named "base-tsconfig.json" and place the baseUrl and paths settings in there.
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["./src/*"]
    }
  }
}
  1. Next, extend your main tsconfig.json file with the custom configuration from the new base-tsconfig.json
{
  "extends": "./base-tsconfig.json"
}

For more information on this workaround, check out this link.

Answer №2

Replace file paths with the baseUrl as the source.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

This adjustment will provide the intended functionality.

// The file resides within the src directory
import path from 'file'

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

How can you properly structure chainable functions in Angular?

Recently, I've been working on developing custom functions for my Angular application. Following the official guidelines, I have created an independent library. My goal is to create chainable functions similar to this: var obj = { test : function( ...

javascriptangulartypescript

When a checkbox is clicked, how can we use Angular 4 to automatically mark all preceding checkboxes as checked?

I have a series of checkboxes with labels such as (Beginner, Intermediate, Advanced, Expert, etc.). When I click on any checkbox, I want all previous checkboxes to be checked. For example: If I click on Advanced, only the preceding checkboxes should get ...

htmlangulartypescriptcheckbox

Encountering a delay in receiving server data causing errors in Angular 2

Within the service class constructor, I make an http call to the server to fetch product category data and store it in the productCategories array. However, when I try to retrieve the productCategories array in the ngInit() function of my component, I enco ...

angulartypescript

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Is there a way to convert this scenario? I am working on a project where the userID needs to be displayed in a specific format. The first 3 characters/numbers and last 3 characters/numbers should be visible, while the middle part should be replaced with ...

javascripttypescript

Applying Material UI class in React: Troubleshooting an error with your hook call

Recently, I have started using React and encountered an issue with a hook call. I understand the root cause of the problem but unsure how to resolve it without starting from scratch. Here is the snippet of the code: import { Fragment, PureComponent } from ...

typescriptreact-hooksmaterial-ui

Encountering an obscure package error while attempting to install an NPM package

After running the following command on my node application: npm install --save-dev typescript I encountered this error message: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563a3f3426271667786e786e">[email pro ...

node.jspostgresqltypescriptnpmpackage-managers

Is the child constantly updating due to a function call?

Having difficulty navigating the intricacies where a child keeps re-rendering due to passing a function from the parent, which in turn references an editor's value in draftjs. function Parent() { const [doSomethingValue, setDoSomethingValue] = Re ...

reactjstypescriptdraftjs

Develop a TypeScript utility function for Prisma

Having trouble inferring the correct type for my utility function: function customUtilityFunction< P, R, A extends unknown[] >( prismaArgs /* Make "where" field optional as it is already defined inside findUnique method below */, fn: ( pris ...

typescriptprisma

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...

node.jstypescriptexpressfetch-api

What are some ways to incorporate Firebase's setPersistence() feature into a React application built with Vite?

In my React project with TypeScript and Vite, using Firebase has presented an issue in the authentication flow. The problem arises when I try to set the persistence type using setPersistence(). Despite what is documented in the official Firebase documenta ...

reactjstypescriptauthenticationreact-hooksfirebase-authentication

What is the correct way to add type annotations to an Axios request?

I have meticulously added type annotations to all endpoints in my API using the openapi-typescript package. Now, I am looking to apply these annotations to my Axios requests as well. Here is a snippet of code from a Vue.js project I have been developing: ...

typescriptvue.jsaxios

Surprising Discovery: TypeScript - node_modules Found in Unusual Directory

Is there a way to make TypeScript imports function properly even if the node_modules directory is not directly in the tree? How can I prevent TypeScript from throwing errors when importing something like rxjs from external/node_modules. For Example: Dir ...

typescript

Anticipating the resolution of promises and observables in Angular 2

Within my accountService module, there is a dialog prompt that requests the user's username and password, returning a promise. If the user clicks on close instead of dismissing the dialog box and the validators require the input data before allowing t ...

javascriptangulartypescriptpromiseobservable

Trigger the component to emit an event once all validators have been cleared

I have developed a unique custom input element that showcases its label when a required constraint is present (calculated in the OnInit method). @Component({ selector: 'custom-input', template: `<div *ngIf="isMandatory()">Mand ...

angulartypescriptangular-reactive-formscontrolvalueaccessor

What is the most efficient way to bring in state from Redux slices as individual variables?

In my notification component, I display the state of queries. To avoid conflicts with variable names, I have to import all states under different names. const { loading, success, error } = useAppSelector(state => state.messageReducer) const { loading, s ...

javascripttypescriptredux

Obtaining the specified cell in a row when a button is clicked

I'm currently grappling with how to retrieve the value of the nth cell in the same row as the button that was clicked in angular2. I understand that I need to pass the $event value, but I'm unsure of how to extract the relevant data. In app.comp ...

angulartypescript

Encountering difficulties during the migration process from a JavaScript to a TypeScript React Component

I've encountered some challenges with configuring TypeScript in my project. Initially, I developed my application using plain JavaScript. However, eager to learn TypeScript, I decided to convert my JavaScript project into a TypeScript one. To achiev ...

javascriptreactjstypescriptvite

Encountering TS1240 Error When Implementing TypeScript Property Decorators in Code Execution

I'm in the midst of a TypeScript project where I am utilizing property decorators to impose validation on class properties. Below is a simplified version of the code I am working with: Please note: Experimental decorators are enabled for this project ...

typescript

Utilizing Webpack and Typescript for an enhanced DataTables experience: A bespoke JQuery Plugin

I am currently facing an issue while trying to integrate the datatables JQuery plugin with webpack and typescript. While I have successfully set up JQuery with typings and intelliSense, the datatables integration seems to be causing issues. After building ...

javascripttypescriptwebpack

Having trouble with refreshing the screen in ReactJs when updating store data with MobX and TypeScript

I am currently facing an issue with my implementation of mobx. I have created a simple chat room that utilizes a WebSocketService I defined myself. The purpose of this service is to abstract the interactions with my API, while the chat itself manages the s ...

reactjstypescriptmobx