About CRA and tsconfig paths about ts-monorepo HOT 7 CLOSED

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.

from ts-monorepo.

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.

from ts-monorepo.

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.

from ts-monorepo.

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

from ts-monorepo.

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.

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;

from ts-monorepo.

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..

from ts-monorepo.

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 :)

from ts-monorepo.