create-react-app should allow TypeScript imports outside `src`
See original GitHub issueIs your proposal related to a problem?
Code reuse is a good thing. It is not uncommon that a backend and a frontend can use the same code, and live in the same repository. The need for sharing code is particularly strong with TypeScript type definitions, because developers on the backend and the frontend want to make sure that they are building against a common types.
Describe the solution you’d like
I don’t know the CRA internals, but maybe one of the following:
- Allow
baseUrl
to point outside.
to enable absolute imports like `import * as foo from 'common/foo``. - Enable relative imports outside
src
likeimport * as foo from '../../common/foo'
.
Describe alternatives you’ve considered
There are work-arounds using a combination of third-party cra-patching libraries. They are tedious to setup though (I worked 3 evenings on coming up with a solution), potentially fragile, and the use case seems so fundamental that I’m very surprised that it is not to supported out-of-the-box.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:74
- Comments:28 (2 by maintainers)
Top Results From Across the Web
How to import shared typescript code using create-react-app ...
Setting baseDir in ts-config.json : Here create-react-app complains about: Your project's baseUrl can only be set to src or node_modules .
Read more >Making Life Easier with Absolute Imports - React in Javascript ...
According to create-react-app Docs, We can use absolute imports in our react project by configuring a jsconfig.json / tsconfig.json (for ...
Read more >The create-react-app imports restriction outside of src directory
JavaScript : The create - react - app imports restriction outside of src directory [ Gift : Animated Search Engine : https://bit.ly/AnimSearch ] ......
Read more >react-app-rewire-alias - npm
This is more than simple alias. This is also a multi-project src directory. Currently, create-react-app (CRA) does not support more than one src...
Read more >Importing a Component | Create React App
Absolute Imports ... You can configure your application to support importing modules using absolute paths. This can be done by configuring a ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I know that it is possible, as I have documented in the link.
However the process to get there is out of proportion. The area of working against the CRA defaults is quite a mess for a newbie, and because the settings of CRA are hidden, documentation is poor. I worked on the solution for 3 evenings, roughly 3 hours each. Isn’t it crazy to be stuck for such a long time on a basic configuration problem, not doing anything productive? I thought the idea of CRA was to get people going quickly. After spending 9 hours on solving a problem that seems to be a basic requirement and facing limitations that have no clear motivation at all, I thought I report my experience.
just to document react-app-rewired/customize-cra workaround for anyone looking for a solution:
react-app-rewired
andcustomize-cra and
replace script build/start/test eact-app-rewired build/start/testconfig-overrides.js
into cra project’s root withwith these changes, CRA starts detecting and building typescript codebases outside of the project
src
tree.