Javascript – Understanding TypeScript Compilation Errors in My Project

I have a lint-staged which works after pre-commit. Everything works correctly except tsc. I’ve already tried a lot with the settings with tsconfig but no result.File tsconfig lies in the same directory as project in the picture.

Settings lint-stager
package.json

  "lint-staged": {
    "src/**/*.{ts,tsx}": ["tsc --skipLibCheck --noEmit"]
  }

Settings that are currently used in my project
tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "strict": true,
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "paths": {
      "@/*": ["*"]
    }
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Error

✖ tsc --skipLibCheck --noEmit:
src/pages/main/ui/main.tsx(1,28): error TS2307: Cannot find module '@/shared/ui/typography' or its corresponding type declarations.
src/pages/main/ui/main.tsx(5,5): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src/pages/main/ui/main.tsx(6,7): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src/pages/main/ui/main.tsx(12,7): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src/shared/ui/typography/ui/typography.tsx(3,8): error TS1259: Module '"C:/Users/Happy/Desktop/front-cn/node_modules/clsx/clsx"' can only be default-imported using the 'esModuleInterop' flag
src/shared/ui/typography/ui/typography.tsx(25,5): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.

File error

import './typography.css';

import clsx from 'clsx';
import { ComponentProps, ReactNode } from 'react';

type TypographyVariant = 'title';
type TypographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div' | 'p';

export type TypographyProps<Tag extends TypographyTag> = ComponentProps<Tag> & {
  variant: TypographyVariant;
  as?: TypographyTag;
  children: ReactNode;
};

export const Typography = <Tag extends TypographyTag = 'div'>({
  variant,
  as = 'div',
  children,
  className,
  ...props
}: TypographyProps<Tag>) => {
  const Component = as as string;

  return (
    <Component
      className={clsx(variant, className)}
      {...props}
    >
      test
      {children}
    </Component>
  );
};

File use Typography

import { Typography } from '@/shared/ui/typography';

export const Main = () => {
  return (
    <div className="flex flex-col gap-10">
      <Typography
        variant="title"
        as="h1"
      >
        Hello
      </Typography>
    </div>
  );
};

enter image description here