React TypeScript组件导入报错：模块无导出成员Title

问题核心 #

你在Title组件中使用export default Title做默认导出，但在页面中用{ Title }的命名导入方式引入，两者不兼容，导致TypeScript抛出该错误。

解决方案 #

方案1：将组件改为命名导出

修改Title组件的导出方式，把默认导出改成命名导出，匹配页面的命名导入逻辑：

import type { FunctionComponent } from "react";

interface TitleProps{
  title: string;
  subtitle: string;
}

// 直接用export const 定义并导出组件
export const Title: FunctionComponent<TitleProps> = ({title, subtitle}) => {
  return (
    <>
      <h1>{title}</h1>  
      <h2>{subtitle}</h2>
    </>
  );
};

方案2：修改页面的导入方式为默认导入

如果不想改动组件代码，就把页面中的命名导入改成默认导入（去掉花括号）：

// 去掉花括号，使用默认导入语法
import Title from "@neuralbertatech/react";
import Head from "next/head";
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Test</title>
      </Head>
      <main>
        <Title title="big title" subtitle="small title" />
      </main>
    </>
  );
};

export default Home;

方案3：检查模块的入口导出配置

如果@neuralbertatech/react是一个独立模块（比如内部共享组件库或npm包），需要确保模块的入口文件（通常是根目录的index.ts）正确导出Title组件：

// 若组件是默认导出，先导入再命名导出
import Title from "./components/Title";
export { Title };

// 若组件是命名导出，直接重新导出
export { Title } from "./components/Title";

额外注意事项 #

• 确认模块的tsconfig.json中，include数组包含了Title.tsx文件；如果是发布的包，需开启compilerOptions.declaration以生成类型声明文件
• 重启开发服务器或TypeScript语言服务，避免缓存导致的识别延迟

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