Comments (7)
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.
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;
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.
Related Issues (20)
- "Experimental support for decorators is a feature that is subject to change in a future release" HOT 1
- Adding tests to CRA example yields an error HOT 6
- Getting build error in examples/cra HOT 1
- Overcoming the Need for TSConfig Multiple Inheritance HOT 4
- How would you add aliases in each of the packages HOT 3
- Add example for sub module exports HOT 1
- simple try to run pnpm run test failed after following steps HOT 2
- Missing documentation or not possible? HOT 2
- Adding a subdirectory in shared project requires `src/` in import, module not found error HOT 1
- How it works with vite & Styled Components HOT 1
- How should I go about using it, like copying the code? I didn't see the instructions for use. HOT 1
- How to make find all references working? HOT 2
- Understanding why `foo` is mapped to `foo/src` in the `nextjs` branch HOT 1
- Type declarations causing errors in Storybook HOT 2
- How can I handle css/less in @nighttrax/components HOT 1
- This problem must appear when using react-router-dom@6 HOT 1
- Problems of adding Sveltekit in apps HOT 2
- Cannot find module '@nighttrax/foo' or its corre… HOT 2
- Support for vscode extension project written by typescript HOT 2
- Support for using alias paths in the package HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ts-monorepo.