About CRA and tsconfig paths

[Codii]

Hey there,

Thanks for this repository, very helpful.

I'm struggling though to understand how to proceed with create-react-app to manage non-relative imports such as utils/foo or components/bar that I use a lot in my code base.

I worked around the fact that CRA does not support "paths" in tsconfig.json - And savagely removes them each time it transpiles the application (See : facebook/create-react-app#5585 (comment)).

The workaround is to use baseUrl set to src, so that all directories there (eg. src/foo) could be resolved non-relatively. (foo)

My issue is that adding this baseUrl to src makes me unable anymore to resolve the paths in the root tsconfig.json (such as @nighttrax/components)

Not sure why, but do you have any clue on that one ?

Cheers mate

[Codii]

Sorry about that, I will give a try to react-app-rewired to see if this solves the problem as you mentioned in the README.

[NiGhTTraX]

Hey @Codii, did you try the example in this repo? That one uses react-app-rewired to make a couple of small modifications to CRA's webpack config, as described in this blogpost. If you prefer to eject you can just apply the modifications in the ejected config.

Let me know if you run into any trouble with those examples.

[Codii]

Thanks for your quick response ! The examples work fine, but I think they do not really cover my issue.

As far as I understand, we can use react-app-rewired to enforce setting a baseUrl in tsconfig. That would probably fix my issue on resolving non-relative paths from src. (Didn't manage to make it work yet but trying hard)

But that would not help for my IDE to understand how to resolve my path alias, right ? Or am I missing something ?

So I can't make it work with this workaround yet.

[Codii]

What I'm trying to achieve is, let's say I have this structure in the cra package :

cra
└── src/
    ├── components
    │   └── MyComponent.tsx
    └── index.tsx

Sorry for the stupid example but I want to be able to import MyComponent.tsx from index.tsx like this :

import MyComponent from 'components/MyComponent.tsx'

instead of using the relative way

[NiGhTTraX]

I want to be able to import MyComponent.tsx from index.tsx

My issue is that adding this baseUrl to src makes me unable anymore to resolve the paths in the root tsconfig.json (such as @nighttrax/components)

Ah, I think I understand your issue now, apologies for not getting it the first time. If you want to have aliases both inside your CRA and outside of it (to other packages in the monorepo) then you need to define all the aliases using a single baseUrl in the tsconfig.json inside your CRA project. Something like

{
  baseUrl: './src',
  paths: {
    "@nighttrax/*": ["../../../packages/*/src"]
  }
}

Note the path aliase that goes outside of the CRA folder. This would then allow

import { Button } from "@nighttrax/components";
import { MyComponent } from "components/MyComponent";

It's unfortunate that you have to redefine the outside aliases in the project's config, but hopefully the upcoming TypeScript 4.1 will improve this.

Expand this to see a git patch that can be applied on top of this repo to make the changes above.

Index: examples/cra/tsconfig.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- examples/cra/tsconfig.json	(revision c52a6e68e61827ba4d1566966634a414416a5931)
+++ examples/cra/tsconfig.json	(date 1600895377421)
@@ -17,7 +17,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": "./src",
+    "paths": {
+      "@nighttrax/*": ["../../../packages/*/src"]
+    }
   },
   "include": [
     "src"
Index: examples/cra/src/index.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- examples/cra/src/index.tsx	(revision c52a6e68e61827ba4d1566966634a414416a5931)
+++ examples/cra/src/index.tsx	(date 1600895469654)
@@ -1,11 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { meaningOfLife } from "@nighttrax/foo";
 import { Button } from "@nighttrax/components";
+import { MyComponent } from "components/MyComponent";
 
 ReactDOM.render(
   <React.StrictMode>
-    {meaningOfLife}
+    {MyComponent}
     <Button />
   </React.StrictMode>,
   document.getElementById("root")
Index: examples/cra/src/components/MyComponent.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- examples/cra/src/components/MyComponent.tsx	(date 1600895469656)
+++ examples/cra/src/components/MyComponent.tsx	(date 1600895469656)
@@ -0,0 +1,1 @@
+export const MyComponent = 32;

[Codii]

Thanks again for your answer.

Unfortunately this would not work, because CRA overwrites tsconfig.json each times you compile the project and removes "paths" from the compilerOptions.

It looks like a blocker for this configuration..

[NiGhTTraX]

CRA won't do that if the aliases are in a separate config that you inherit, so you can put them in a tsconfig2.json and just have extends: './tsconfig2.json' in your main one. Hopefully they won't patch this out :)