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.