Ошибка Vite Parse при импорте компонента React

Question

Я пробую новый фреймворк Shopify — Hydrogen, который использует Vite. Это что-то вроде NextJS.

Этоindex.server.jsxфайл:

      import Layout from "../components/Layout.server";

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>
          Hello world!
        </h1>
      </div>
    </Layout>
  );
}

И это то, чтоLayout.server.jsфайл выглядит так:

      export default function Layout({children}) {

  return (
    <div>
      ${children}
    </div>
  );
}

Если я не импортирую и не использую компонент Layout, все работает нормально.

Но при использовании Layout возникает эта ошибка:

Любые идеи о том, как это можно решить и что может быть причиной этого? Я думаю, что сообщение об ошибке недостаточно описательно

Answer 1

Я только что понял, что проблема была в расширенииLayout.server.jsфайл, который должен был быть.jsx. Но до сих пор не знаю, почему, поэтому, пожалуйста, дайте мне знать, если вы знаете