解决TypeScript项目中TSX文件导入JSX组件的“模块未找到”错误

{
  "compilerOptions": {
    "target": "ESNext",                 // 编译目标JavaScript版本
    "lib": ["dom", "dom.iterable", "esnext"], // 包含的库文件
    "allowJs": true,                    // 允许编译JavaScript文件 (包括.jsx)
    "skipLibCheck": true,               // 跳过所有声明文件(*.d.ts)的类型检查
    "esModuleInterop": true,            // 允许从CommonJS模块默认导入
    "allowSyntheticDefaultImports": true, // 允许合成默认导入
    "strict": true,                     // 启用所有严格类型检查选项
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "noFallthroughCasesInSwitch": true, // 防止switch语句中的case穿透
    "module": "esnext",                 // 模块化方案 (如ESM)
    "moduleResolution": "node",         // 模块解析策略
    "resolveJsonModule": true,          // 允许导入.json文件
    "isolatedModules": true,            // 确保每个文件都可以安全地单独编译
    "noEmit": true,                     // 不输出编译结果 (由其他工具如Webpack处理)
    "jsx": "react-jsx",                 // JSX编译模式
    "baseUrl": "./",                    // 基础URL，用于解析非相对模块名
    "paths": {                          // 路径映射，用于导入别名
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js", // 确保包含.js文件
    "src/**/*.jsx"  // 确保包含.jsx文件
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

import React from 'react'; // 如果jsx选项是"react-jsx"，此行可以省略
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import 'swiper/css';
// import { sliderSettings } from './common.js'; // 假设存在
// import data from './slider.json'; // 假设存在

// 示例数据，实际项目中可能从props或外部文件获取
const sliderSettings = {}; // 简化示例
const data = [
  { image: 'path/to/img1.jpg', name: 'Item A', description: 'Description A' },
  { image: 'path/to/img2.jpg', name: 'Item B', description: 'Description B' },
];

const Carousel = () => {
  return (
    <div className='p-[1.5rem] w-[100%] overflow-hidden relative'>
        <Swiper {...sliderSettings}>
            {
                data.map((card, i) => (
                    <SwiperSlide key={i}>
                        <div className='flex flex-col justify-center items-start gap-[0.6rem] p-4 rounded-[10px] max-w-[max-content] m-auto transition-all delay-300 ease-in'>
                            <img src={card.image} alt='samskaras'/>
                            <span>{card.name}</span>
                            <span>{card.description}</span>
                        </div>
                    </SwiperSlide>
                ))
            }
        </Swiper>
    </div>
  );
}

export default Carousel;

import HText from '@/shared/HText';
import { SelectedPage } from '@/shared/types';
import { motion } from 'framer-motion';
import Carousel from '@/components/Carousel'; // 正确导入JSX组件

type Props = {
    setSelectedPage: (value: SelectedPage) => void;
}

const Samskaras = ({setSelectedPage}: Props) => {
  return (
    <section id='samskaras' className='w-full bg-primary-100 py-40'>
        <motion.div
            onViewportEnter={() => setSelectedPage(SelectedPage.Samskaras)}
        >
            <motion.div
                className='mx-auto w-5/6'
                initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.5 }} transition={{ duration: 0.5 }} variants={{ hidden: {opacity: 0, x: -50}, visible: {opacity: 1, x: 0}}}
            >
                <div className='md:w-3/5'>
                    <HText>
                        SAMSKARAS
                    </HText>
                    <p className='py-5'>
                        Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
                        tellus quam porttitor. Mauris velit euismod elementum arcu neque
                        facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit
                        enim mattis odio in risus nunc.
                    </p>
                </div>
            </motion.div>
            {/* 在TSX中成功使用JSX组件 */}
            <Carousel />
        </motion.div>
    </section>
  );
}

export default Samskaras;