Issues regarding integreting the widget to a NextJS project

[Pooya-Oladazimi]

The TS4NFDI service portal was initiated last week using the NextJS framework. This is the official React documentation recommendation regarding starting a React project (do not use React Lib alone, create-react-app is deprecated): https://react.dev/learn/start-a-new-react-project

I list the issues I faced here so that it can help us to improve the widgets and installation process:

• It is not clear what should be the GitHub token access rights to install the widget: https://ts4nfdi.github.io/terminology-service-suite/comp/latest/?path=/docs/overview--docs#installation
• In the installation process, step 4: NextJS needs at least React version 18.2.0 to work. The version in the documentation is 17.0.2 . same story for react-dom: https://nextjs.org/docs/messages/react-version
• As a point for other NextJS users: the component that includes widgets needs to be client side and have 'use client' on top. for further details: https://nextjs.org/docs/app/building-your-application/rendering/client-components

I will add to this list if I find something more.

[Pooya-Oladazimi]

To use a widget in a NextJS app:

Our widgets are using the browser window object that is not accessible on the NextJS server. Therefore, just importing the widgets in a normal way does not work and raises errors on the build.

The widgets need to get importet dynamically on runtime. The issue is that dynamic import causes losing the widget input props type. So we need to define the type based on the used props:

'use client'

import dynamic from 'next/dynamic';

type AutocompleteWidgetProps = {
  api: string;
  hasShortSelectedLabel: boolean;
  parameter: string;
  placeholder: string;
  preselected: never[];
  selectionChangedEvent: () => void;
  showApiSource: boolean;
  singleSelection: boolean;
  ts4nfdiGateway: boolean;
};

const AutocompleteWidget = dynamic<AutocompleteWidgetProps>(() =>
  import("@ts4nfdi/terminology-service-suite").then((mod) => mod.AutocompleteWidget)
  , { ssr: false }) as React.ComponentType<AutocompleteWidgetProps>;;

import { QueryClient, QueryClientProvider } from "react-query";


export default function Widgets() {
  const queryClient = new QueryClient();
  return (
    <div className="md:col-span-8 sm:row-span-1">
      <QueryClientProvider client={queryClient}>
        <AutocompleteWidget
          api={"https://ts4nfdi-api-gateway.prod.km.k8s.zbmed.de/api-gateway/"}
          hasShortSelectedLabel={true}
          parameter={"ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form"}
          placeholder="Search for a Concept"
          preselected={[]}
          selectionChangedEvent={function noRefCheck() { }}
          showApiSource={true}
          singleSelection={true}
          ts4nfdiGateway={true}
        />
      </QueryClientProvider>
    </div>
  );
}

Ref: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading