[Feature] implement "extends" for tsconfig.json

[munrocket]

Hello, thank you for this library.

I am tried it with existed react+typescript project and have errors with At symbol in my project.

../../../client-new/src/index.tsx:38:30: error: Could not resolve "@/contexts/Reports/Reports"
import useReportsContext from '@/contexts/Reports/Reports';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../../client-new/src/index.tsx:66:7: error: File extension not supported: src/index.css
import './index.css';
       ~~~~~~~~~~~~~
src/contexts/Global/Global.ts:17:24: error: Could not resolve "@/config/history"
import { history } from '@/config/history';
                        ~~~~~~~~~~~~~~~~~~
src/contexts/Global/Global.ts:18:18: error: Could not resolve "@/config/paths"
import paths from '@/config/paths';
                  ~~~~~~~~~~~~~~~~
...

Probably exist a way how to define default path? Seems that automatic detection of baseUrl not work for me.

[evanw]

I tried to reproduce this in a simple case but couldn't. Here's what I tried:

• ./tsconfig.json

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["at-dir/*"]
      }
    }
  }

• ./entry.ts

  import {x} from '@/test'
  console.log(x)

• ./at-dir/test.ts

  export let x = 123

Building this with esbuild --bundle entry.ts succeeds with this output:

(() => {
  // at-dir/test.ts
  let x = 123;

  // entry.ts
  console.log(x);
})();

There's nothing special about the @ symbol that would make it not work, so there must be something else going on. Could you provide some sample code I could run to reproduce the problem? Alternatively, could you describe more about your setup? What does your tsconfig.json file look like?

[munrocket]

Ok, the reason why this happens because I extend main file with another as described here facebook/create-react-app#5645

//tsconfig.js
{
  "compilerOptions": {
    //...
  },
  "extends": "./tsconfig.paths.json"
}

//tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

Seems that missing functional (little bug)

[evanw]

Thanks for debugging this! Yeah extends isn't currently implemented. I'll treat this bug as being about implementing extends for tsconfig.json then.

[munrocket]

By the way I am tried to add paths in tsconfig.js but after one build paths disappears from tsconfig so issue facebook/create-react-app#5118 still actual and I can't build react-app-rewired project without proposed hack with extends.

[munrocket]

🎉

[zzwx]

I see this weird warning while compiling using esbuild that wasn't there in v0.6.0 and started showing in v0.6.1 and v0.6.2:

* Cannot find base config file "@spotify/web-scripts/config/tsconfig.json"
  src/main/node_modules/ismobilejs/tsconfig.json:2:13
    "extends": "@spotify/web-scripts/config/tsconfig.json",
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The tsconfig.json looks like following:

{
  "extends": "@spotify/web-scripts/config/tsconfig.json",
  "include": ["src"],
  "exclude": ["src/__tests__", "src/index.browser.ts"],
  "compilerOptions": {
    "target": "es3"
  }
}

and belongs to https://www.npmjs.com/package/ismobilejs

I hope that helps to tackle the problem.

The warning started showing only since v0.6.1.

[fhillipgcastillo]

This is closed, but for anyone looking for this issue in the future, I found that for local dev, the solution is to add our aliases to the webpage config-overrides.js file, so it solves the aliases issue.

An example:

// config-overrides.js
// import this at the top
const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.alias,
      'services': path.resolve(__dirname, 'src/shared/services'),
      'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
    },
  };
return config;
};

All this information I found was by @gustavograeff1998 at medium, in this Source.