Repository navigation
tsconfig.json gets overwritten preventing real configuration #8614
Description
I like CRA, especially now when I learned how to override some of its configs thanks to beautiful https://github.com/gsoft-inc/craco
And the first thing I use craco for - is fixing webpack config setting up project resolves and aliases.
For example, this craco.config.js:
const path = require('path');
module.exports = {
webpack: {
configure: webpackConfig => {
webpackConfig.resolve.alias['components'] = path.resolve(__dirname, 'src', 'components');
webpackConfig.resolve.alias['state'] = path.resolve(__dirname, 'src', 'state');
return webpackConfig;
}
}
};
adds two aliases: components and state allowing us to import things using sensible paths (at long last):
import App from 'components/app';
import { loginUser } from 'state/users/actions';
// ...
and this works perfectly, but only for JavaScript, not for TypeScript. And this despite they state it should acquire path resolutions from webpack, but this never happens, probably because of craco.
To workaround this one needs to provide additional configuration for TypeScript in tsconfig.json:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"components/*": ["src/components/*"],
"state/*": ["src/state/*"],
}
}
}
but.. this is not going to work anyway, because react-scripts is overwriting tsconfig.json, removing "paths" section! As result I had to eject the project just to get this silly resolution working. I think this is a bug, because as I said overriding webpack resolve via craco works fine for JavaScript and thus must also work for TypeScript.
Activity
hrgui commentedon Mar 7, 2020
https://github.com/facebook/create-react-app/blob/30fc0bf5ed566d9b42194d56541d278013d7928c/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L131
Seems there is a comment saying that it's not supported right now.
#5585
According to
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/modules.js#L125-L144
as an alternative/workaround, we could set
baseUrl=srcto do the aliases that we're trying to achieve?Note: edited to correct and clarify the actual current state of paths in create-react-app
hrgui commentedon Mar 7, 2020
Here's an example sandbox with using
baseUrl = 'src'as an alternative to the paths described in this issue w/ JavaScript / TypeScript combined.https://codesandbox.io/s/broken-glitter-0hkxy
OnkelTem commentedon Mar 8, 2020
Thanks @hrgui for this great discovery. I see it's really working in the sandbox, so I'll try it tomorrow in my project and write back.
avaliani commentedon Mar 8, 2020
Thanks @hrgui ! Modifying tsconfig.json to add
"baseUrl": "src"tocompilerOptionsworked. This field was preserved byreact-scripts start(a.k.a.yarn start) unlike other properties likepathswhich get deleted.#6656
My react-scripts version:
stale commentedon Apr 7, 2020
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.
stale commentedon Apr 12, 2020
This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.