sendcookiesplz•12mo ago

TypeError: str.split is not a function

Hey Gang. Im following along this tutorial: https://deno.com/blog/build-a-blog-with-fresh But I am running into some major issues. In the last step it tells me to use gfm (https://deno.land/x/gfm/mod.ts) to get the rendering markdown functioning. Like this:

import { PageProps } from "$fresh/server.ts";
import { getPost, Post } from "../../../server/post/post.ts";
import { Head } from "$fresh/runtime.ts";
import { CSS, render } from "$gfm";
export default function BlogEntry(props: PageProps & { data: Post }) {
  console.log("blog entry", props.data);
  return (
    <>
      <Head>
        <style dangerouslySetInnerHTML={{ __html: CSS }} />
      </Head>
      // ...
      <div
        class="mt-8 markdown-body"
        dangerouslySetInnerHTML={{ __html: render(props.data) }}
      />
    </>
  );
}

import { PageProps } from "$fresh/server.ts";
import { getPost, Post } from "../../../server/post/post.ts";
import { Head } from "$fresh/runtime.ts";
import { CSS, render } from "$gfm";
export default function BlogEntry(props: PageProps & { data: Post }) {
  console.log("blog entry", props.data);
  return (
    <>
      <Head>
        <style dangerouslySetInnerHTML={{ __html: CSS }} />
      </Head>
      // ...
      <div
        class="mt-8 markdown-body"
        dangerouslySetInnerHTML={{ __html: render(props.data) }}
      />
    </>
  );
}

But whenever I try to use this, I end up throwing this error:

TypeError: str.split is not a function
    at emojify (https://deno.land/x/emoji@0.3.0/emoji.ts:134:6)
    at render (https://deno.land/x/gfm@0.2.5/mod.ts:109:14)
    at Object.BlogEntry (file:///home/paul/git/project/routes/blog/[slug]/index.tsx:15:44)

TypeError: str.split is not a function
    at emojify (https://deno.land/x/emoji@0.3.0/emoji.ts:134:6)
    at render (https://deno.land/x/gfm@0.2.5/mod.ts:109:14)
    at Object.BlogEntry (file:///home/paul/git/project/routes/blog/[slug]/index.tsx:15:44)

I dont know if there's an issue with emojify, or if I have forgotten to use some standard library? It seems that string should have split(). By deno.json:

  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.4.2/",
    "preact": "https://esm.sh/preact@10.15.1",
    "preact/": "https://esm.sh/preact@10.15.1/",
    "$std/": "https://deno.land/std@0.198.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
    "$gfm": "https://deno.land/x/gfm/mod.ts",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3"
  },

  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.4.2/",
    "preact": "https://esm.sh/preact@10.15.1",
    "preact/": "https://esm.sh/preact@10.15.1/",
    "$std/": "https://deno.land/std@0.198.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
    "$gfm": "https://deno.land/x/gfm/mod.ts",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3"
  },

Deno Blog

How to Build a Blog with Fresh

Create a simple blog with Fresh in minutes.

1 Reply

sendcookiesplz•12mo ago

Nevermind, I figured it out. Turned out that I was passing in props.data which is wrong, as its an object, not a string. What I had to do was props.data.content. I think IntelliJ needs better Deno integration..