initJuno crashes Qwik app

marc4gov commented 1 year ago

Following the Getting Started, I replaced the initJuno parameter with my satteliteId in this Qwik component root.tsx like so:

import { component$, useTask$} from '@builder.io/qwik';
import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
import { RouterHead } from './components/router-head/router-head';

import './global.css';

import { initJuno } from "@junobuild/core";

export default component$(() => {
  /**
   * The root of a QwikCity site always start with the <QwikCityProvider> component,
   * immediately followed by the document's <head> and <body>.
   *
   * Dont remove the `<head>` and `<body>` elements.
   */
  // this task will be called exactly once, either on the server or on the browser
  useTask$(async () => {
    await initJuno({
      satelliteId: "aaaaa-bbbbb-ccccc-ddddd-cai",
    });
    console.log('Juno mounted');
  });

  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <link rel="manifest" href="/manifest.json" />
        <RouterHead />
      </head>
      <body lang="en">
        <RouterOutlet />
        <ServiceWorkerRegister />
      </body>
    </QwikCityProvider>
  );
});

App crashes with this error:

% npm run start

> start
> vite --open --mode ssr

  VITE v4.1.4  ready in 827 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
/Users/marc/Projects/juno/qwik-app/node_modules/@junobuild/core/dist/cjs/index.cjs.js:47
ic-request`);function ga(t){if(typeof t!="string"||t.length<64)throw new Error("Invalid public key."); ...

...

ReferenceError: indexedDB is not defined
    at LE (/Users/marc/Projects/juno/qwik-app/node_modules/@junobuild/core/dist/cjs/index.cjs.js:47:11409)
    at WE (/Users/marc/Projects/juno/qwik-app/node_modules/@junobuild/core/dist/cjs/index.cjs.js:47:12946)
    at Function.create (/Users/marc/Projects/juno/qwik-app/node_modules/@junobuild/core/dist/cjs/index.cjs.js:47:13347)
    at /Users/marc/Projects/juno/qwik-app/node_modules/@junobuild/core/dist/cjs/index.cjs.js:47:14660
    at new Promise (<anonymous>)
...

peterpeterparker commented 1 year ago

Can it be because of the --mode ssr mode? If you run only client side those it works out?

Cool input, I will have a try to Qwik!

peterpeterparker commented 1 year ago

I found the issue @marc4gov, the code should be executed on the client side only.

Juno is using Agent-js underneath which uses IndexedDB for the authentication and which does not exists in NodeJS, therefore the error at build time.

To overcome the issue, you can use the QwikuseVisibleTask$ hook instead of useTask$. That way it will be executed only on the client side.

useVisibleTask$(async () => {
    await initJuno({
      satelliteId: "aaaaa-bbbbb-ccccc-ddddd-cai",
    });
    console.log('Juno mounted');
  });

For deployement you will also need the Static Site Generation (SSG) adapter. SSR is in our roadmap but not yet there.

Hope that helps, thanks for giving a try at Juno with Qwik 👍

junobuild / juno-js

initJuno crashes Qwik app #10