oklas/react-app-alias

Alias is not resolved based on baseUrl setting on tsconfig.paths.json

LuisRizo opened this issue · 9 comments

LuisRizo commented

For some background, in my company we use aliases to import shared folders outside of the app folder (imports outside of src/). We did this by using symlinks of the outside folders and placed them inside the src/ folder of each app that consumed the alias.

This library helped the need to create symlinks as well as made adding a new folder slightly easier to do by changing fewer configs.

However, an issue we found was that we were using baseUrl: 'src' (the default in create-react-app). This library apparently requires to use baseUrl: '.', so we had to change our aliases in the tsconfig.paths.json respectively.

This is a small change for smaller codebases that weren't using imports like import X from 'components/X';, since the change of baseUrl broke those imports.

I believe that supporting baseUrl should be an easy enough change, but wanted to know if this was intentional.

In summary: compilerOptions.baseUrl is being ignored by the library, and requires it to be '.' or otherwise the compiler will fail to resolve aliases.

Using the following config causes an error when importing the alias.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "above-root-ts/*": [ "../../above-root-ts/src/*" ],
      "above-root-js/*": [ "../../above-root-js/src/*" ],
      "near-src/*": [ "../near-src/src/*" ]
    }
  }
}

Module not found: Can't resolve 'above-root-js/AboveRootJs' in '~/Projects/apps/main/src'
DWboutin commented

Got the same problem

exaucae commented

I'm running into the same issue! @oklas, any intel, so far?

oklas commented

@MassMessage provided some additional information in #69

oklas commented

Thanks to all for sharing info about this question

oklas commented

The react-scripts system contains many non-simple systems that are complexly configured, and changing this configuration is obviously not an easy task either. Therefore, two decisions were made. Main and extended.

In the main solution, the task is to add aliases next to the src folder. In order to keep this solution not so complicated baseUrl is set to '.'

The point of setting baseUrl = 'src' is to automatically generate a set of alias from the src folder. And add some restrictions to folders above baseUrl. If we need more directories next to src - then we need to set baseUrl = '.'.

And if we need aliases for all folders inside src or any other directory, then the autoscan #70 solution is offered.

Currently problem may be solved using autoscan option #70 (only for main mode yet). I hope I will have more time soon to check possibility baseUrl='src' too. After check why autoscan is not just start working in extended mode. But for main mode baseUrl='src' will allows aliases only in src and restrict to create alias near src.

oklas commented

The state of issue "work in progress" and not yet mentioned in docs yet and typescript is not supported yet.

  • 👍1
oklas commented

🎉 This issue has been resolved in version react-app-alias-ex-v2.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

oklas commented

🎉 This issue has been resolved in version react-app-alias-v2.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

oklas commented

Released in react-app-alias-v2.2.0 🎉. Check for Using baseUrl section in readme. Feel free to reopen or create new if any. Thanks.

  • 🎉2
  • 🚀1