TypeScript - 找不到模块“./Message”或其相应的类型声明

Question

我正在尝试创建一个组件（App）来导入另一个文件（Message.tsx）中描述的另一个组件（Message）。

我正在 Mac 上学习 这个 React 教程，使用最新版本的 VS Code、React、Node.JS。

App.tsx 看起来像这样：

import { Message } from './Message';

function App() {

  return (
    <>
        Hello world <Message/>
    </>
  )
}

export default App

Message.tsx 看起来像这样：

function Message() {
    return <h1> This is a message <h1/>;
}

export default Message;

当我运行服务器时，我得到：

Uncaught SyntaxError: The requested module '/src/Message.tsx?t=1720979324606' does not provide an export named 'Message' (at App.tsx:1:10)

Message.tsx 中没有错误。

我的搜索让我找到了 这个 StackOverflow 帖子 关于类似的错误。我确信 App.tsx 和 Message.tsx 位于同一目录中，并且我相信我正确导出 Message（这就是教程的方式）。

我重新启动了计算机，重新安装了 Node、VS Code、node_modules 等

我期望 Message 能够被 App.tsx 正确导入并在 App 组件中使用。

Answer 1

您的 message.tsx 文件默认导出组件。你需要像这样导入它

import Message  from './Message';