How to import useSWR in PostLayout?

[nelsonlaidev]

I try to import useSWR in PostLayout but get the following error

import useSWR from "swr";
import Link from "@/components/Link";
import PageTitle from "@/components/PageTitle";
import { BlogSEO } from "@/components/SEO";
import Image from "@/components/Image";
import Tag from "@/components/Tag";
import siteMetadata from "@/data/siteMetadata";
import Comments from "@/components/comments";
import ScrollTopAndComment from "@/components/ScrollTopAndComment";
import NewsletterForm from "@/components/NewsletterForm";
import TOCInline from "@/components/TOCInline";
import TOC from "@/components/TOC";

const editUrl = (fileName) =>
    `${siteMetadata.siteRepo}/blob/main/data/blog/${fileName}`;

const twitterShare = (slug) =>
    `https://twitter.com/intent/tweet?url=${encodeURIComponent(
        `${siteMetadata.siteUrl}/blog/${slug}`
    )}`;
const facebookShare = (slug) =>
    `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
        `${siteMetadata.siteUrl}/blog/${slug}`
    )}`;

const postDateTemplate = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
};

export default function PostLayout({
    frontMatter,
    authorDetails,
    next,
    prev,
    children,
    toc,
}) {
    const { slug, fileName, date, title, tags, readingTime } = frontMatter;
    return (
        <>
            ...
        </>
    );
}

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I seem to find that the error maybe occurs in MDXComponents

/* eslint-disable react/display-name */
import { useMemo } from "react";
import { getMDXComponent } from "mdx-bundler/client";
import CustomLink from "./Link";
import Image from "./PostImage";
import TOCInline from "./TOCInline";
import Pre from "./Pre";
import { BlogNewsletterForm } from "./NewsletterForm";

export const MDXComponents = {
    Image,
    TOCInline,
    a: CustomLink,
    pre: Pre,
    BlogNewsletterForm: BlogNewsletterForm,
    wrapper: ({ components, layout, ...rest }) => {
        const Layout = require(`../layouts/${layout}`).default;
        return <Layout {...rest} />;
    },
};

export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
    const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource]);

    return <MDXLayout layout={layout} components={MDXComponents} {...rest} />;
};

I have another question to ask why the author doesn't start a group such as Facebook, Telegram, Discord. Or already have it? I think that will be convenient.

[AlexanderZeilmann]

Have a look at this answer. Maybe it helps fixing your bug.

I have another question to ask why the author doesn't start a group such as Facebook, Telegram, Discord. Or already have it? I think that will be convenient.

There are already GitHub discussions, which nicely work together with the hosting of the source code. What would be an advantage of the other systems compared to GitHub Discussions?

[nelsonlaidev]

There are already GitHub discussions, which nicely work together with the hosting of the source code. What would be an advantage of the other systems compared to GitHub Discussions?

Okay, I agree with you.

Have a look at this answer. Maybe it helps fixing your bug.

It doesn't help me fix the bug. I just create components named ViewCounter and import that in PostLayout.js. And I get the below error. I don't know what I am doing wrong.

Code:

import fetcher from "@/lib/fetcher";
import useSWR from "swr";

export default function ViewCounter() {
    const { data } = useSWR("/api/github", fetcher);

    return <>{data}</>;
}

Error

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

terminal

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MDXComponents.js:18.
    at wrapper (webpack-internal:///./components/MDXComponents.js:31:17)
    at w (eval at getMDXExport (A:\小康 Files\Github\網站\honghong-me\node_modules\mdx-bundler\dist\client.js:55:14), <anonymous>:3:1302)
    at MDXLayoutRenderer (webpack-internal:///./components/MDXComponents.js:42:30)       
    at Blog (webpack-internal:///./pages/blog/[...slug].js:68:17)
    at main
    at div
    at div
    at SectionContainer (webpack-internal:///./components/SectionContainer.js:8:29)      
    at LayoutWrapper (webpack-internal:///./components/LayoutWrapper.js:23:26)
    at exports.ThemeProvider (A:\小康 Files\Github\網站\honghong-me\node_modules\next-themes\dist\index.js:1:1552)
    at SessionProvider (A:\小康 Files\Github\網站\honghong-me\node_modules\next-auth\react\index.js:416:24)
    at App (webpack-internal:///./pages/_app.js:54:16)
    at StyleRegistry (A:\小康 Files\Github\網站\honghong-me\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:394:29)
    at AppContainerWithIsomorphicFiberStructure (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:424:57)
    at div
    at Body (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:701:21)

Then, I tried cloning the latest version repositories and importing useSWR. It works. It's very weird. How can I debug?

[AlexanderZeilmann]

I'm not totally sure what you want to do, but I guess you want to include the ViewCounter component in blog posts, right?

In this case you have to load it like this in the components/MDXComponents.js file:

/* eslint-disable react/display-name */
import { useMemo } from "react";
import { getMDXComponent } from "mdx-bundler/client";
import CustomLink from "./Link";
import Image from "./PostImage";
import TOCInline from "./TOCInline";
import Pre from "./Pre";
import { BlogNewsletterForm } from "./NewsletterForm";
import { ViewCounter } from "./ViewCounter";  // <- Add this line. Assuming ViewCounter is defined in the `components` folder

export const MDXComponents = {
    Image,
    TOCInline,
    a: CustomLink,
    pre: Pre,
    BlogNewsletterForm: BlogNewsletterForm,
    ViewCounter: ViewCounter,                                                        // <- Add this line
    wrapper: ({ components, layout, ...rest }) => {
        const Layout = require(`../layouts/${layout}`).default;
        return <Layout {...rest} />;
    },
};

export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
    const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource]);

    return <MDXLayout layout={layout} components={MDXComponents} {...rest} />;
};

[nelsonlaidev]

It doesn't work. I want to include ViewCounter in the blog post. I just import ViewCounter in PostLayout and it works normally. But I add import useSWR from "swr"; in ViewCounter.js. Then get an error.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MDXComponents.js:20. <---- ?
    at wrapper (webpack-internal:///./components/MDXComponents.js:37:17)
    at w (eval at getMDXExport (A:\小康 Files\Github\網站\honghong-me\node_modules\mdx-bundler\dist\client.js:55:14), <anonymous>:3:1302)
    at MDXLayoutRenderer (webpack-internal:///./components/MDXComponents.js:48:30)       
    at Blog (webpack-internal:///./pages/blog/[...slug].js:68:17)
    at main
    at div
    at div
    at SectionContainer (webpack-internal:///./components/SectionContainer.js:8:29)      
    at LayoutWrapper (webpack-internal:///./components/LayoutWrapper.js:23:26)
    at exports.ThemeProvider (A:\小康 Files\Github\網站\honghong-me\node_modules\next-themes\dist\index.js:1:1552)
    at SessionProvider (A:\小康 Files\Github\網站\honghong-me\node_modules\next-auth\react\index.js:416:24)
    at App (webpack-internal:///./pages/_app.js:54:16)
    at StyleRegistry (A:\小康 Files\Github\網站\honghong-me\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:394:29)
    at AppContainerWithIsomorphicFiberStructure (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:424:57)
    at div
    at Body (A:\小康 Files\Github\網站\honghong-me\node_modules\next\dist\server\render.js:701:21)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

MDXComponents.js

/* eslint-disable react/display-name */
import { useMemo } from "react";
import { getMDXComponent } from "mdx-bundler/client";
import CustomLink from "./Link";
import Image from "./PostImage";
import TOCInline from "./TOCInline";
import Pre from "./Pre";
import { BlogNewsletterForm } from "./NewsletterForm";
import { ViewCounter } from "./ViewCounter";

export const MDXComponents = {
    Image,
    TOCInline,
    a: CustomLink,
    pre: Pre,
    BlogNewsletterForm: BlogNewsletterForm,
    ViewCounter: ViewCounter,
    wrapper: ({ components, layout, ...rest }) => {
        const Layout = require(`../layouts/${layout}`).default;
        return <Layout {...rest} />;      //      <--- line 20
    },
};

export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
    const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource]);

    return <MDXLayout layout={layout} components={MDXComponents} {...rest} />;
};

I tried importing useSWR in PostLayout directly. The problem is not on ViewCounter.
You can clone my repo and try.

[timlrx]

Even just adding import useSWR from "swr"; to the layout causes the error.

A standard fetch and import works though:

const [data, setData] = useState(false)
  useEffect(() => {
    const stats = async () => {
      const results = await fetch('https://api.github.com/repos/vercel/swr').then((res) =>
        res.json()
      )
      setData(results)
    }
    stats()
  }, [])

[timlrx]

I suspect swr does something to support both server-side fetch and client-side fetch which might be an issue for the layout page as the layout page only supports client-side js. A workaround might be to use swr in pages/blog/[...slug].js and pass down the information to the layout to render or just fetch on the client side.

[timlrx]

As to why not another group, I just like all discussions to be public and it's easier for people to search for information as well. I also don't have the capacity to support real-time chat. You could try the next.js discord group though. Most of the technical support questions tend to be around nextjs, tailwindcss or mdx and are not really specific to the template😃

[nelsonlaidev]

@timlrx @AlexanderZeilmann Thanks for solving my problem ❤️

[timlrx]

@TszHong0411, I checked Lee rob's blog and realized he is using swr fixed at version 1.1.2. With that version, using it directly in the blog layout or as an mdx component works as expected. The updated version - 1.2.1 does not. I won't spend more time finding out if there have been any underlying changes in the API to cause a breaking change, but you should be able to work with v1.1.2 instead.

[nelsonlaidev]

Oh! It works. You are smart! ❤️