TSX导入JSX组件报错：找不到模块声明，求解决方案

我正在开发一个以TypeScript为主的项目，尝试将用JSX编写的Carousel组件导入到TSX文件中，但操作时出现「找不到模块声明」的错误。

TSX文件代码（Samskaras.tsx） #

import HText from '@/shared/HText';
import { SelectedPage } from '@/shared/types'
import { motion } from 'framer-motion';
import Carousel from './Carousel';

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>

        </motion.div>
    </section>
  )
}

export default Samskaras

待导入的JSX组件代码（Carousel.jsx） #

import React from 'react';
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import 'swiper/css';
import { sliderSettings } from './common.js';
import data from './slider.json';

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;

解决方法 #

方法1：将JSX文件重命名为TSX #

直接把Carousel.jsx改名为Carousel.tsx，TypeScript会自动识别组件类型。如果组件依赖的资源（比如slider.json、common.js）缺少类型定义，可补充如下：

• 给slider.json添加类型声明（创建slider.d.ts）：

type SliderCard = {
  image: string;
  name: string;
  description: string;
};

declare module './slider.json' {
  const value: SliderCard[];
  export default value;
}

• 把common.js改为common.ts，给sliderSettings补充类型定义。

方法2：添加JSX/JS文件的全局类型声明 #

在项目src目录下创建global.d.ts文件，添加以下内容：

declare module '*.jsx' {
  import type { ComponentType } from 'react';
  const Component: ComponentType;
  export default Component;
}

// 若需要导入普通JS文件，可补充
declare module '*.js' {
  const value: any;
  export default value;
}

该声明会让TypeScript识别所有JSX/JS模块的基本类型。

方法3：调整tsconfig.json配置 #

修改tsconfig.json的编译选项，允许导入JS文件：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false, // 无需检查JS文件类型时设为false
    // 其他原有配置...
  }
}

开启allowJs后，TypeScript会允许导入JS模块，配合上述类型声明使用效果更佳。

内容的提问来源于stack exchange，提问作者Santa