0

Im getting the following error when trying to run npm run build in my qwik app: RollupError: "useServerTimeLoader" is not exported by "src/routes/layout.tsx", imported by "src/s_u0bwm0i5da8.js".

The layout.tsx file exports a routeLoader$ function and a default export of a component$ JSX component.

I tried creating an empty useServerTimeLoader function and export it in the layout.tsx file. it did run the the build process successfully but I kept wondering if it is not the right solution to do so.

Skander Tebourbi
  • 1

1 Answers1

0

if you create the "Basic App" with the Qwik CLI you will have this working example with useServerTimeLoader

- layout.tsx

import { component$, Slot, useStyles$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

import Header from '~/components/starter/header/header';
import Footer from '~/components/starter/footer/footer';

import styles from './styles.css?inline';

export const useServerTimeLoader = routeLoader$(() => {
  return {
    date: new Date().toISOString(),
  };
});

export default component$(() => {
  useStyles$(styles);
  return (
    <>
      <Header />
      <main>
        <Slot />
      </main>
      <Footer />
    </>
  );
});

- footer.tsx

import { component$ } from '@builder.io/qwik';
import { useServerTimeLoader } from '~/routes/layout';
import styles from './footer.module.css';

export default component$(() => {
  const serverTime = useServerTimeLoader();

  return (
    <footer>
      <div class="container">
        <a href="https://www.builder.io/" target="_blank" class={styles.anchor}>
          <span>Made with ♡ by Builder.io</span>
          <span class={styles.spacer}>|</span>
          <span>{serverTime.value.date}</span>
        </a>
      </div>
    </footer>
  );
});
Giorgio Boa
  • 341
  • 4