ADR: Configuration of import aliases in Javascript applications

[yordis]

No description provided.

[manuphatak]

I like to throw my best counterargument at these ADRs. I can't think of one for this ADR. This ADR is rock-solid advice.

[yordis]

It seems that CRA didn't take into consideration that the following package could exist https://www.npmjs.com/package/src since https://github.com/facebook/create-react-app/blob/8bf050aa7c16078fed5e51ac8388d6100c29e105/packages/react-scripts/config/modules.js#L76

[yordis]

Moved the ADR to Reviewing

[tleef]

I found a decent workaround for CRA which I think satisfies the spirit of this ADR.

The problem is CRA doesn't allow you to define path aliases. However, we are able to define a baseUrl in our tsconfig.json See here

We can use the baseUrl to achieve the goal of importing our application files like the following example

import { Header } from "@/components/Header";

CRA sets up the directory structure for you and requires that you have a directory named src with an index.tsx file and a react-app-env.d.ts file (assuming you are using the TypeScript template) It also comes with a predefined tsconfig.json

We can satisfy these requirements with minimal changes to the generated directory structure and tsconfig.json while still being able to import our app modules using the above style by setting our "baseUrl": "./src" in our tsconfig.json and creating a @ directory inside of src

The resulting directory structure would be as follows

tree . -L 2
├── tsconfig.json
├── src
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── @
│   │   ├── components/...

and our tsconfig.json will look like this (or similar)

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src"
  },
  "include": [
    "src"
  ]
}