Unhandled Runtime Error Nextjs: function is not a function

I want to import this function into my main tsx file:

"use client"
// components/LoadMore
import { useState } from 'react';

export function useLoadMore() {
  const [postNum, setPostNum] = useState(3);

  const handleClick = () => {
    setPostNum(prevPostnum => prevPostnum + 3)
  }
  return {
    postNum, handleClick
  };
}

When I try to call it with for instance const { postNum, handleClick } = useLoadMore() in the main file (this is the way I imported it import { useLoadMore } from '../app/components/LoadMore') following error comes back as an output:

Error: (0 , app_components_LoadMore__WEBPACK_IMPORTED_MODULE_4_.useLoadMore) is not a function

I intend to use the function in the main.tsx file as following:

export default function Home() {
  const posts = getAllPosts()
  const {postNum, handleClick} = useLoadMore();

  return (
    <main className="max-w-4xl mx-auto py-8">
      <TypeWriter
        words={["Welcome to my website!", "I'm excited to share", "my thoughts"]}
      />
      
      {/* Container with flexbox */}
      <div className="flex flex-col lg:flex-row lg:space-x-8">
        
        {/* Left section: Blog posts */}
        <div className="flex-1">
          <ul>
            {posts.slice(0, postNum).map((post) => (
              <li key={post.slug} className="mb-4">
                <Link href={`/blog/${post.slug}`}>
                  <h2 className="text-xl font-semibold hover:underline text-blue-500">
                    {post.title}
                  </h2>
                  <h1 className="text-gray-500">{post.description}</h1>
                </Link>
                <p className="text-gray-500">{post.date}</p>
              </li>
            ))}
            <button onClick={handleClick}>Load More</button>
          </ul>
        </div>
      </div>
    </main>
  )
}

Solution

By the looks of it the issue is that you're trying to import a hook inside of a server component. Beware that server components do not support client-side functionality such as hooks. See this table here to understand more about what you can and can't do with client and server components.

To fix your issue, simply turn the parts of your code that require client-side functionality into client components. For example, define this new client component like this:

"use client";

// This is at components/BlogPosts.tsx

import Link from "next/link";
import { useLoadMore } from "./LoadMore";

export function BlogPosts({
  posts,
}: {
  posts: {
    slug: string;
    description: string;
    title: string;
    date: string;
  }[];
}) {
  // define your type here

  const { postNum, handleClick } = useLoadMore();
  return (
    <div className="flex-1">
      <ul>
        {posts.slice(0, postNum).map((post) => (
          <li key={post.slug} className="mb-4">
            <Link href={`/blog/${post.slug}`}>
              <h2 className="text-xl font-semibold hover:underline text-blue-500">
                {post.title}
              </h2>
              <h1 className="text-gray-500">{post.description}</h1>
            </Link>
            <p className="text-gray-500">{post.date}</p>
          </li>
        ))}
        <button onClick={handleClick}>Load More</button>
      </ul>
    </div>
  );
}

Then import this client component inside of the server-side Main.tsx component like this:

import { BlogPosts } from "../components/BlogPosts";

export default function Home() {
  const posts = getAllPosts();

  return (
    <main className="max-w-4xl mx-auto py-8">
      <TypeWriter
        words={[
          "Welcome to my website!",
          "I'm excited to share",
          "my thoughts",
        ]}
      />

      {/* Container with flexbox */}
      <div className="flex flex-col lg:flex-row lg:space-x-8">
        {/* Left section: Blog posts */}
        <BlogPosts posts={posts} />
      </div>
    </main>
  );
}