Zenn
📑

AstroでReact tsxを使おうとした際のError

2022/08/05に公開
React
TypeScript
error
tsx
Astro
tech

AstroでReactをしようとして、tsxで作成したコンポーネントをimportしようとした際に出たエラー

  • エラー文
An import path cannot end with a '.tsx' extension. Consider importing '../components/common/Header.js' instead.ts(2691)

コード

  • Header.tsx
import React from 'react'

const Header = () => {
  return (
    <div>
      <div>Header</div>
    </div>
  )
}

export { Header }
  • Layout.astro
---
import '../styles/global.css'
import { Header } from "../components/common/Header.tsx"

export interface Props {
	title: string;
}

const { title } = Astro.props as Props;
---

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
		<title>{title}</title>
	</head>
	<body>
		<Header />
		<slot />
	</body>
</html>

解決策

名前付きエクスポートをやめて、デフォルトエクスポートに変更しただけ

  • Header.tsx
export default Header
  • Layout.astro
import Header from "../components/common/Header"

終わり

個人的には名前付きエクスポートが好きなのだが、他の解決策が見つかるまではこれでいこうと思う

2022/10/23追記

名前付きエクスポートできるようになってました

Discussion