Use "paths" in tsconfig.json and jsconfig.json

[sheepsteak]

Adds support for compilerOptions.paths in both tsconfig.json and jsconfig.json so that path mapping can be used:

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "base/*": ["./components/base/*"],
    "pages/*": ["./components/pages/*"],
    "actions/*": ["./state/actions/*"]
  }
}

• Parse paths and add to Jest aliases
• Parse paths and add to Webpack aliases
• Show error when paths is used without baseUrl for TypeScript before 4.1
• Show error when paths is used improperly (has to be like example above with only one possible location; no extra fallbacks as Webpack 4 can't handle it)
• Add docs

I've tried different combinations of paths in both JavaScript and TypeScript projects but no doubt there are still some bugs. I'd just like to get some early feedback and find out what the appropriate level of testing is.

Closes #5645
Closes #9406
Closes #9999

[sheepsteak]

This is to allow for the fact that TypeScript 4.1 does not need baseUrl to use paths.

[cevr]

Should also probably warn if a user for whatever reason decides to use more than one path (eg: ["components/*", "layouts/*"]). What do you think?

[sheepsteak]

Thanks, I've just done this. I tried implementing multiple path support first but it seems like Webpack 4 does not support this. Webpack 5 does though so when CRA moves to that we can add this feature.

I've now created an errors array that I push strings into. I can't use the current messages array as they are just outputted as information that your tsconfig.json has been updated. If the baseUrl or paths are set up incorrectly I need to process.exit(1) as we shouldn't go any further.

[sheepsteak]

All the changes I've made in this file should equally be applied to any jsconfig.json that is being used. However, there is no file that does at the moment. Should we have a verifyJavaScriptSetup.js? 👀

[pd8]

This is a really useful change that would remove the need to use CRACO or React App Rewired in our application (and assumedly many apps). CRA-TS used to support this but that project is now deprecated so it would be great to get this into the main project.

Is there any movement on this functionality CRA team?

[merceyz]

Just to note: if you're using Yarn 2 you can already do this using the link: protocol
https://yarnpkg.com/features/protocols
https://yarnpkg.com/features/protocols#why-is-the-link-protocol-recommended-over-aliases-for-path-mapping

[pnewhook]

What's outstanding for this to be merged? I'd like to share a project of interfaces between an express app and a CRA frontend stored in the same directory.

[danielo515]

Hey, can someone move this forward?
The more you leave it the harder it gets to merge

[sheepsteak]

What's outstanding for this to be merged?

The checkboxes in the description are up to date. More importantly, I still need some guidance from the CRA team around whether we need to start verifying the jsconfig.json file like we do with the tsconfig.json and also on the overall approach; it just needs a review basically to see if they'll accept it and then I get some tests done.

The related issue for this (#5645) has been placed into the 4.x milestone and that seems really far away at the moment due to the amount of PRs in the other milestones. I'm not sure if this is a priority for the team at the moment.

[keremciu]

this would be a great addition

[jayarjo]

We also wait for this to progress.

[EricRabil]

I was very disheartened to discover how long this has taken to be fixed. Regardless, here's my patch. It's ugly, it requires craco, it may break with a later CRA update, and it assumes you are using aliases how I am (my usage is shown).

It does the following:

• Grabs an original copy of tsconfig
• Wraps verifyTypeScriptSetup using require.cache
• After verifyTypeScriptSetup runs it restores the paths you configured
• Injects your tsconfig paths into webpack so they are properly resolved

craco.config.js

const verifyTypeScriptSetup = require("react-scripts/scripts/utils/verifyTypeScriptSetup");
const fs = require("fs");
const os = require("os");
const path = require("path");

const mapObject = (obj, mapper) => Object.fromEntries(Object.entries(obj).map(mapper));

// original copy of tsconfig
const originalTSConfig = require("./tsconfig.json");

// generates a mapping of aliases that webpack can take
const webpackCompatibleAliases = mapObject(originalTSConfig.compilerOptions.paths, ([ k, [ v ] ]) => [
    k.slice(0, -2), path.resolve(__dirname, originalTSConfig.compilerOptions.baseUrl, v.slice(0, -1))
]);

// wrap the utility function that is ruining the party!! >:(
require.cache[require.resolve("react-scripts/scripts/utils/verifyTypeScriptSetup")].exports = function() {
    // let cra think they ruined the party
    verifyTypeScriptSetup();

    // delete the cached tsconfig.json so we can get the cra-updated tsconfig
    delete require.cache[require.resolve("./tsconfig.json")];

    const tsconfig = require("./tsconfig.json");

    // restore paths
    tsconfig.compilerOptions.paths = originalTSConfig.compilerOptions.paths;

    // write tsconfig as it is written in the verifyTypeScriptSetup.js file
    fs.writeFileSync("tsconfig.json", JSON.stringify(tsconfig, null, 2).replace(/\n/g, os.EOL) + os.EOL);
}

module.exports = {
    webpack: {
        configure: config => {
            if (!config.resolve) config.resolve = {};
            if (!config.resolve.alias) config.resolve.alias = {};

            // load the ts aliases into webpack, from tsconfig
            Object.assign(config.resolve.alias, webpackCompatibleAliases);

            // do whatever else you need to

            return config;
        }
    }
}

tsconfig.json (necessary bits only)

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@contexts/*": [
        "contexts/*"
      ],
      "@hooks/*": [
        "hooks/*"
      ],
      "@util/*": [
        "util/*"
      ],
      "@chat-items/*": [
        "transcript/items/chat/*"
      ],
      "@transcript-items/*": [
        "transcript/items/transcript/*"
      ],
      "@devtools/*": [
        "devtools/*"
      ],
      "@transcript/*": [
        "transcript/*"
      ]
    }
  }
}

[stale]

This pull request 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.

[yordis]

I have a dream, bump

[hichemfantar]

Please add this already, There's no reason we have to use an external package to just add import aliases!

[pycraft114]

any recent news about this?

[EricRabil]

please

[kytosai]

This is a must-have feature

[EricRabil]

For a framework that wants to be batteries-included this is a pretty huge facepalm to leave sitting here for what could easily become a year or more.

import xyz from "../../../../contexts/xyz" vs import xyz from "@/contexts/xyz"

This seems like a pretty huge enhancement, and an easy one. The fix is sitting right here. Pleaseee.