remix使ってハマった💦

Tips 🚨

remixというフレームワークで、コンポーネントを作成して、importする時に、エラーが出て悩まされた💦

どうやら、export defaultと書かないようだ。

修正するとエラーが消えます。

example

componentディレクトリに、Counter.tsxを作成。

app/component/Counter.tsx

import { useState } from "react"
// remixでは、export defaultにしない!
export const Counter = () => {
  const [count, setCount] = useState<number>(0)
  const increment = () => setCount(count + 1)
  
  return (
    <div>
        <h1>Counter</h1>
        <p>{count}</p>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={increment}>Increment</button>
    </div>
  )
}

routesディレクトリに、ある_index.tsxで、Counterコンポーネントをインポートする。

import { Counter } from "~/component/Counter"
と書くのがポイント。~を使って、ディレクトリを指定する。

app/routes/_index.tsx

import type { MetaFunction } from "@remix-run/node";
import { Counter } from "~/component/Counter"

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div className="font-sans p-4">
      <Counter />
    </div>
  );
}

公式に情報があるようだが、これだけではよくわからないな。
https://remix.run/docs/en/main/route/component

Route Component
The default export of a route module defines the component that will render when the route matches.

ルートコンポーネント
ルートモジュールのデフォルトのエクスポートは、ルートがマッチしたときにレンダリングされるコンポーネントを定義します。

export default function MyRouteComponent() {
  return (
    <div>
      <h1>Look ma!</h1>
      <p>I'm still using React after like 8 years.</p>
    </div>
  );
}