https://github.com/infctr/fork-ts-react-scripts
A fork of CRA2 that supports tsconfig.json path
https://github.com/infctr/fork-ts-react-scripts
Last synced: 4 days ago
JSON representation
A fork of CRA2 that supports tsconfig.json path
- Host: GitHub
- URL: https://github.com/infctr/fork-ts-react-scripts
- Owner: infctr
- Created: 2018-11-01T10:03:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-02T13:15:36.000Z (over 7 years ago)
- Last Synced: 2025-07-08T17:08:55.276Z (11 months ago)
- Language: JavaScript
- Size: 85 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fork-ts-react-scripts
A fork of CRA 2.1+ that doesn't mess up with `tsconfig.json` absolute paths import feature.
## How it works
Original CRA with typescript support overrides `paths` and `baseUrl` settings in an existing typescript project enforcing to use relative paths imports ([refer](https://github.com/facebook/create-react-app/issues/5585#issuecomment-433751395)) which pretty much sucks. This version of `react-scripts` removes these strict checks allowing to keep `paths` in `tsconfig.json` just to keep the changes minimal.
## Usage
In order to make absolute path imports work webpack config has to be tweaked just a tad bit with the help of [arackaf/customize-cra](https://github.com/arackaf/customize-cra) package and [timarney/react-app-rewired](https://github.com/timarney/react-app-rewired). Install these two and create a `config-overrides.js` file at the root of your project. Add aliases and module directories that you like for webpack `resolve` settings:
```js
// config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
addBundleVisualizer,
} = require('customize-cra');
const addWebpackModules = modules => config => {
if (!config.resolve) {
config.resolve = {};
}
if (!config.resolve.modules) {
config.resolve.modules = ['node_modules'];
}
config.resolve.modules = [...config.resolve.modules, ...modules];
return config;
};
module.exports = override(
process.env.BUNDLE_VISUALIZE && addBundleVisualizer(),
addWebpackModules([path.resolve(__dirname, 'src')]),
addWebpackAlias({
['scripts']: path.resolve(__dirname, 'scripts'),
['e2e']: path.resolve(__dirname, 'e2e'),
})
);
```
Add `fork-ts-react-scripts` and remove `react-scripts`:
```sh
yarn remove react-scripts
yarn add fork-ts-react-scripts
```
Update your `package.json` tasks to make sure CRA's config gets "rewired":
```diff
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start --scripts-version fork-ts-react-scripts",
- "build": "react-scripts build"
+ "build": "react-app-rewired build --scripts-version fork-ts-react-scripts"
}
```
And that's it! Now you can have your cake and eat it 🎉.
## Tracking changes from the CRA upstream
Forking a single package from a monorepo is not as straightforward as it might seem, so it was created as a git subtree of the original CRA with squashed commits preserving the ability to track upstream changes. Refer to this [gist](https://gist.github.com/alfredringstad/ac0f7a1e081e9ee485e653b6a8351212) for some guidance.