Lint-Staged configuration issues an error in a JavaScript monorepo environment

Question

I'm encountering a problem while configuring lint-staged in my monorepo, which contains both web and mobile applications.

The issue arises when I stage a single file from the apps/web directory and execute the following script:

pnpm exec lint-staged

This results in an error:

error TS6142: Module './App' was resolved to (./apps/mobile/index.ts), but '--jsx' is not set.

As a troubleshooting step, I tried excluding the apps/mobile directory from my web tsconfig, but the same error persisted.

Additionally, I have set the jsx compilerOption in my apps/mobile to react-native.

My questions are:

Why does lint-staged target my apps/mobile directory even though there are no files staged under the apps/mobile directory?

Why do I still receive the error after configuring the jsx compilerOptions to "react-native" on my mobile tsconfig?

Below is the structure of my project:

|apps
 |mobile
  |App.tsx
  |tsconfig.base.json
  |tsconfig.json
 |web
  |tsconfig.base.json
  |tsconfig.json
|lint-staged.config.cjs
|tsconfig.base.json

Here are the relevant configuration files:

root tsconfig.base.json

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "commonjs",
        "noEmit": true,
        "baseUrl": "./",
        "allowJs": false,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "incremental": true,
        "typeRoots": ["./node_modules/@types", "./@types"]
    }
}

./apps/web/tsconfig.json

{
    "extends": "./tsconfig.base.json",
    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
    "exclude": ["./node_modules"]
}

./apps/web/tsconfig.base.json

{
    "extends": "../../tsconfig.base.json",
    "display": "@leumit/app-web",
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "baseUrl": "./",
        "jsx": "preserve",
        "typeRoots": ["./@types", "./node_modules/@types"]
    }
}

./apps/mobile/tsconfig.json

{
    "extends": "./tsconfig.base.json",
    "include": ["./**/*.tsx", "./src/**/*.tsx", "./src/**/*.ts"],
    "exclude": ["node_modules"]
}

./apps/mobile/tsconfig.base.json

{
    "extends": "../../tsconfig.base.json",
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "@leumit/app-mobile",
    "compilerOptions": {
        "module": "esnext",
        "baseUrl": "./",
        "allowJs": true,
        "jsx": "react-native",
        "lib": ["DOM", "ESNext"],
        "target": "ESNext",
        "typeRoots": ["./node_modules/@types"]
    }
}

lint-staged.config.cjs

module.exports = {
  'apps/web/**/*.{ts,tsx,cjs}': [
        'pnpm --filter web exec eslint -c ./.eslintrc.cjs --ignore-path ./.eslintignore --fix',
        () => 'tsc --noEmit —-exclude apps',
    ],
};

App environment:

Mobile:
    "react": "18.2.0",
    "react-native": "0.72.6"
    "expo": "~49.0.15",
Web:
    "next": "14.0.4",
    "react": "18.2.0",
Root:
    "pnpm": "8.13.1",
    "lint-staged": "15.2.0",