S
SolidJS•2y ago
flashblaze

Property 'giscus-widget' does not exist on type 'JSX.IntrinsicElements'

I'm trying to add wrapper for giscus library: https://github.com/giscus/giscus-component for Solid I'm now probably at the last step but I'm getting this error. 
import { createEffect, createSignal } from "solid-js";
import type { GiscusProps } from "./types";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "giscus-widget": any;
    }
  }
}

export default function Giscus({
  id,
  host,
  repo,
  repoId,
  category,
  categoryId,
  mapping,
  term,
  strict,
  reactionsEnabled,
  emitMetadata,
  inputPosition,
  theme,
  lang,
  loading,
}: GiscusProps) {
  const [mounted, setMounted] = createSignal(false);

  createEffect(() => {
    if (mounted()) return;
    import("giscus");
    setMounted(true);
  });

  return (
    <giscus-widget
      id={id}
      host={host}
      repo={repo}
      repoid={repoId}
      category={category}
      categoryid={categoryId}
      mapping={mapping}
      term={term}
      strict={strict}
      reactionsenabled={reactionsEnabled}
      emitmetadata={emitMetadata}
      inputposition={inputPosition}
      theme={theme}
      lang={lang}
      loading={loading}
    />
  );
}
import { createEffect, createSignal } from "solid-js";
import type { GiscusProps } from "./types";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "giscus-widget": any;
    }
  }
}

export default function Giscus({
  id,
  host,
  repo,
  repoId,
  category,
  categoryId,
  mapping,
  term,
  strict,
  reactionsEnabled,
  emitMetadata,
  inputPosition,
  theme,
  lang,
  loading,
}: GiscusProps) {
  const [mounted, setMounted] = createSignal(false);

  createEffect(() => {
    if (mounted()) return;
    import("giscus");
    setMounted(true);
  });

  return (
    <giscus-widget
      id={id}
      host={host}
      repo={repo}
      repoid={repoId}
      category={category}
      categoryid={categoryId}
      mapping={mapping}
      term={term}
      strict={strict}
      reactionsenabled={reactionsEnabled}
      emitmetadata={emitMetadata}
      inputposition={inputPosition}
      theme={theme}
      lang={lang}
      loading={loading}
    />
  );
}
Any idea what might be causing it?
GitHub
GitHub - giscus/giscus-component: Component library for giscus, a c...
Component library for giscus, a comments system powered by GitHub Discussions. - GitHub - giscus/giscus-component: Component library for giscus, a comments system powered by GitHub Discussions.
8 Replies
lxsmnsyc
lxsmnsyc•2y ago
- You shouldn't override global, but the solid-js module - little tip but you probably shouldn't destructure props
flashblaze
flashblazeOP•2y ago
will do. i was following the pattern given in the repo but it did not work and so i tried the above code. following the repo i added the below code in vite-env.d.ts but still the same error 
/// <reference types="vite/client" />

interface GiscusWidgetAttributes {
  id?: string;
  host?: string;
  repo: `${string}/${string}`;
  repoid: string;
  category?: string;
  categoryid?: string;
  mapping: import("./lib/types").Mapping;
  term?: string;
  theme?: import("./lib/types").Theme;
  strict?: import("./lib/types").BooleanString;
  reactionsenabled?: import("./lib/types").BooleanString;
  emitmetadata?: import("./lib/types").BooleanString;
  inputposition?: import("./lib/types").InputPosition;
  lang?: import("./lib/types").AvailableLanguage;
  loading?: import("./lib/types").Loading;
}

declare namespace JSX {
  interface IntrinsicElements {
    "giscus-widget": GiscusWidgetAttributes;
  }
}
/// <reference types="vite/client" />

interface GiscusWidgetAttributes {
  id?: string;
  host?: string;
  repo: `${string}/${string}`;
  repoid: string;
  category?: string;
  categoryid?: string;
  mapping: import("./lib/types").Mapping;
  term?: string;
  theme?: import("./lib/types").Theme;
  strict?: import("./lib/types").BooleanString;
  reactionsenabled?: import("./lib/types").BooleanString;
  emitmetadata?: import("./lib/types").BooleanString;
  inputposition?: import("./lib/types").InputPosition;
  lang?: import("./lib/types").AvailableLanguage;
  loading?: import("./lib/types").Loading;
}

declare namespace JSX {
  interface IntrinsicElements {
    "giscus-widget": GiscusWidgetAttributes;
  }
}
lxsmnsyc
lxsmnsyc•2y ago
flashblaze
flashblazeOP•2y ago
thanks for the help! 
import { createEffect, createSignal } from "solid-js";
import type { GiscusProps } from "./types";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "giscus-widget": GiscusWidgetAttributes;
    }
  }
}

export default function Giscus({
  id,
  host,
  repo,
  repoId,
  category,
  categoryId,
  mapping,
  term,
  strict,
  reactionsEnabled,
  emitMetadata,
  inputPosition,
  theme,
  lang,
  loading,
}: GiscusProps) {
  const [mounted, setMounted] = createSignal(false);

  createEffect(() => {
    if (mounted()) return;
    import("giscus");
    setMounted(true);
  });

  return (
    <giscus-widget
      id={id}
      host={host}
      repo={repo}
      repoid={repoId}
      category={category}
      categoryid={categoryId}
      mapping={mapping}
      term={term}
      strict={strict}
      reactionsenabled={reactionsEnabled}
      emitmetadata={emitMetadata}
      inputposition={inputPosition}
      theme={theme}
      lang={lang}
      loading={loading}
    />
  );
}
import { createEffect, createSignal } from "solid-js";
import type { GiscusProps } from "./types";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "giscus-widget": GiscusWidgetAttributes;
    }
  }
}

export default function Giscus({
  id,
  host,
  repo,
  repoId,
  category,
  categoryId,
  mapping,
  term,
  strict,
  reactionsEnabled,
  emitMetadata,
  inputPosition,
  theme,
  lang,
  loading,
}: GiscusProps) {
  const [mounted, setMounted] = createSignal(false);

  createEffect(() => {
    if (mounted()) return;
    import("giscus");
    setMounted(true);
  });

  return (
    <giscus-widget
      id={id}
      host={host}
      repo={repo}
      repoid={repoId}
      category={category}
      categoryid={categoryId}
      mapping={mapping}
      term={term}
      strict={strict}
      reactionsenabled={reactionsEnabled}
      emitmetadata={emitMetadata}
      inputposition={inputPosition}
      theme={theme}
      lang={lang}
      loading={loading}
    />
  );
}
this is now working w/o any errors
DaniGuardiola
DaniGuardiola•2y ago
Hey @pcblazef, sorry for reviving this old thread but I'm trying to use your component and I'm running into issues For context, I'm trying to use it in a Solid Start project, and getting the error v.template is not a function Where v seems to be the require'd solid-js/web package
lxsmnsyc
lxsmnsyc•2y ago
it's most likely that the package is built only for the client so you can't load it in SolidStart normally
DaniGuardiola
DaniGuardiola•2y ago
I see, think I should maybe load lazily? ended up building this wrapper as a hack: 
import { createSignal, type JSX, onMount, Show, Suspense } from "solid-js";

type ClientDeferredProps = {
  LazyComponent: () => JSX.Element;
};

export function ClientDeferred(props: ClientDeferredProps) {
  const [show, setShow] = createSignal(false);

  onMount(() => {
    setShow(true);
  });

  return (
    <Show when={show()} fallback={null}>
      <Suspense fallback={null}>
        <props.LazyComponent />
      </Suspense>
    </Show>
  );
}
import { createSignal, type JSX, onMount, Show, Suspense } from "solid-js";

type ClientDeferredProps = {
  LazyComponent: () => JSX.Element;
};

export function ClientDeferred(props: ClientDeferredProps) {
  const [show, setShow] = createSignal(false);

  onMount(() => {
    setShow(true);
  });

  return (
    <Show when={show()} fallback={null}>
      <Suspense fallback={null}>
        <props.LazyComponent />
      </Suspense>
    </Show>
  );
}
Uh, this loads a whole another solid into the page 😦 I think I'll just copy the component code into my project, but it'd be awesome to make this work properly, I'll see if I can investigate how that could be achieved
flashblaze
flashblazeOP•2y ago
Will check this tonight and let you know if I find anything
Want results from more Discord servers?
Add your server