Merge existing "paths" config into tsconfig.json

[karlhorky]

Currently, installing the UpLeveled ESLint config will create a new tsconfig.json file, overwriting any existing files.

This is a problem on Next.js projects using shadcn/ui, which relies on the default import alias configuration @/* in the tsconfig.json file, created by create-next-app (see output below)

We could merge in specific values from the existing tsconfig.json from students, starting with the "paths" config.

➜  p mkdir a
➜  p cd a
➜  a pnpm create next-app@latest . --typescript --tailwind --eslint
.../Library/pnpm/store/v3/tmp/dlx-40701  |   +1 +
.../Library/pnpm/store/v3/tmp/dlx-40701  | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/k/p/a.

Using pnpm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next

Packages: +352
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 360, reused 352, downloaded 0, added 352, done

dependencies:
+ next 14.1.0
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @types/node 20.11.24
+ @types/react 18.2.61
+ @types/react-dom 18.2.19
+ autoprefixer 10.4.17
+ eslint 8.57.0
+ eslint-config-next 14.1.0
+ postcss 8.4.35
+ tailwindcss 3.4.1
+ typescript 5.3.3

Done in 12.3s
Initialized a git repository.

Success! Created a at /Users/k/p/a

➜  a git:(main) cat tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
➜  a git:(main) pnpm add --save-dev eslint-config-upleveled@latest
pnpm upleveled-eslint-install
Progress: resolved 235, reused 224, downloaded 0, added 0
Packages: +132 -3
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
Progress: resolved 484, reused 421, downloaded 55, added 132, done

devDependencies:
+ eslint-config-upleveled 7.8.1

 WARN  Issues with peer dependencies found
.
└─┬ eslint-config-upleveled 7.8.1
  └─┬ eslint-plugin-jsx-expressions 1.3.2
    └── ✕ unmet peer @typescript-eslint/parser@"^4.0.0 || ^5.0.0 || ^6.0.0": found 7.0.2 in eslint-config-upleveled

Done in 12.8s
Detected project type: Next.js
Setting "type": "module" in package.json...
Installing 3 ESLint config dependencies...
Packages: +50 -2
++++++++++++++++++++++++++++++++++++++++++++++++++--
Progress: resolved 533, reused 504, downloaded 21, added 49, done

devDependencies:
+ prettier 3.2.5
+ stylelint 16.2.1
+ stylelint-config-upleveled 1.0.7

 WARN  Issues with peer dependencies found
.
└─┬ eslint-config-upleveled 7.8.1
  └─┬ eslint-plugin-jsx-expressions 1.3.2
    └── ✕ unmet peer @typescript-eslint/parser@"^4.0.0 || ^5.0.0 || ^6.0.0": found 7.0.2 in eslint-config-upleveled

Done in 6.2s
✅ Done installing dependencies
Copying config files...
Copied .vscode/settings.json
Copied eslint.config.js
Copied prettier.config.js
Copied stylelint.config.js
Copied tsconfig.json (existing file overwritten)
✅ Done copying config files
Updating .gitignore...
✅ Done updating .gitignore
➜  a git:(main) ✗
➜  a git:(main) ✗ cat tsconfig.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "eslint-config-upleveled/tsconfig.base.json",
  "compilerOptions": {
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "**/*.cjs",
    "**/*.mjs",
    ".next/types/**/*.ts"
  ]
}

This also affects new Expo apps (create-expo): #343 (comment)

[karlhorky]

Workaround

Manually restore tsconfig.json after installing the UpLeveled ESLint config:

1. Copy contents of tsconfig.json file before installing UpLeveled ESLint config
2. Paste copied contents back into tsconfig.json to restore the file after UpLeveled ESLint config has been installed

[karlhorky]

This also affects Expo (React Native) apps - create-expo creates this default tsconfig.json file which is overwritten by our own, causing TypeScript errors:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

Let's try to fix this before the lecture on 21 June 2024.

[Eprince-hub]

When checking the possible solution for this issue, I am thinking of two possible ways

1. Add the needed paths object that is causing issues when it's removed to the tsconfig Templates that we are installing with the eslint-config-upleveled. The two identified projects where this issue occurs are the Next.js and Expo projects. if the path alias is the way to go now, maybe we should adopt it also
2. Update the install scripts in eslint-config-upleveled to not override this path of the file?

Questions

Do we just want to include this particular paths object that causes issues when it's removed or include everything from the original tsconfig created by these projects?