Facing Errors & Unexpected Issues in Modern.js – Need Solutions

[Battosuai]

I am trying out this framework for first time. Following doc. Facing some issues. I have currently read the routing section.
My current route structure

Error boundary
In the doc, code was provided

import { useRouteError } from '@modern-js/runtime/router';

const ErrorBoundary = () => {
  const error = useRouteError();
  return (
    <div>
      <h1>{error.status}</h1>
      <h2>{error.message}</h2>
    </div>
  );
};
export default ErrorBoundary;

This throws type error for error as it is set to unknown. What should be the type here?

Pre render hooks - Layout
Following pre render section, my code with ssr enabled

import { RuntimeContext } from '@modern-js/runtime';
import { Outlet } from '@modern-js/runtime/router';

export const init = (context: RuntimeContext) => {
  if (process.env.MODERN_TARGET === 'node') {
    return {
      message: 'Hello World By Server',
    };
  }

  const { context } = runtimeContext;
  const data = context.getInitData();
  // If the expected data is not obtained
  if (!data.message) {
    return {
      message: 'Hello World By Client',
    };
  }
};

export default function Layout() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

issue 1, Duplicate identifier 'context'
issue 2, where does the runtimeContext comes from? it is not declared anywhere.
issue 3, If I run lint it will trigger imports are only used as type, tell me to import type {RuntimeContext} from '@modern-js/runtime'; . Then why not do this in doc?

Pre render hooks - Page
In page following example code,

import { useRuntimeContext } from '@modern-js/runtime';
import { Helmet } from '@modern-js/runtime/head';
import './index.css';

const Index = () => {
  const context = useRuntimeContext();
  const { message } = context.initialData;

  return (
    <div className="container-box">
      <Helmet>
        <link
          rel="icon"
          type="image/x-icon"
          href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
        />
      </Helmet>
      <main>
        <h1>Hello from Modern js</h1>
        <p>{message}</p>
      </main>
    </div>
  );
};

export default Index;

Here message is throwing type error Property 'message' does not exist on type 'Record<string, unknown> | undefined'. So how to fix this? How to set type for initialData here?

[yimingjfe]

Thank you for your feedback. I hope my answer can solve your problem

This throws type error for error as it is set to unknown. What should be the type here?

1. The type of error is unkown, which is expected. Here you can use type guard to avoid the error, such as error instanceof Error, isRouteErrorResponse(error).

issue 1, Duplicate identifier 'context'

2. The input parameter of the function should be runtimeContext, which should be a mistake. Thanks for your feedback. I will fix it.

issue 2, where does the runtimeContext comes from? it is not declared anywhere.

3. The init function is a conventional API; the framework will call the init function and inject the runtimeContext.

If I run lint it will trigger imports are only used as type, tell me to import type {RuntimeContext} from '@modern-js/runtime'; . Then why not do this in doc?

4. In the default template of Modern.js, I didn't encounter this error. I think you might have customized the lint? I think import type is a better writing style, and I will update the doc.

Here message is throwing type error Property 'message' does not exist on type 'Record<string, unknown> | undefined'. So how to fix this? How to set type for initialData here?

5. In the component, you can get the data returned in the init hook. You can customize the type here, and then use it by context.initialData as CustomType. The code of the doc can't be used directly, it is unfriendly and I will update the doc.

// src/routes/layout.tsx
import { RuntimeContext } from '@modern-js/runtime';

type InitialData = {
  message: string;
}

export const init = (context: RuntimeContext): InitialData => {
  return {
    message: 'Hello World',
  };
};

// src/routes/page.tsx
import { useRuntimeContext } from '@modern-js/runtime;

export default () => {
  const context = useRuntimeContext();
  const { message } = context.initialData as InitialData;

  return <div>{message}</div>;
};

Additionally, if you want to request and manage data, the most recommended solution is data-fetch, rather than init hook.