tsconfig.json gets overwritten preventing real configuration

[OnkelTem]

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.

[hrgui]

create-react-app/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

Line 131 in 30fc0bf

paths: { value: undefined, reason: 'aliased imports are not supported' },

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=src to 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]

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]

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]

Thanks @hrgui ! Modifying tsconfig.json to add "baseUrl": "src" to compilerOptions worked. This field was preserved by react-scripts start (a.k.a. yarn start) unlike other properties like paths which get deleted.
#6656

My react-scripts version:

  "name": "react-scripts",
  "version": "3.4.0",

[stale]

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]

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.