Importing my custom component in a Next 14 project

[raphox]

When I am trying to import a component from my custom library in a Next 14 project, I am getting the following exception:

My current code is:

// pages/index.js
import * as React from "react";

import { Separator } from "metacomet-ui-components";

import Layout from "@/components/layout";

export default function StatementsPage() {
  return (
    <Layout>
      <Separator />
    </Layout>
  );
}

// separator.tsx
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";

import { cn } from "@/lib/utils";

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
);
Separator.displayName = SeparatorPrimitive.Root.displayName;

export { Separator };

My custom component extends the https://ui.shadcn.com/ and the problem is related to the uses of the method React.useEffect.

The message printed in the console is:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

My collected infos:

1. I have more than one copy of React in the same app. Checking the build JS files in the browser console, I can see two definitions of the React library in different files. I am using React and ReacDom as peerDependencies to prevent this, but it seems to be not working.
2. After reading many posts, I tried to use the use client notation to fix it without success.

[serifcolakel]

Thank your feed-back, Are u wrapping component like this on top or something else?

https://www.npmjs.com/package/serif-ui-components

i'm trying my package its work on next-js (v14 app router)

[raphox]

Hi,

I am using a page router. My goal is to create an SPA using the Next pages router. I tried to use the useCallback using the page route and it wasn't render. Before it, after reading other posts, I already tried to use the createContext wrapping my component without success, too. I am forking your project to check if using the useEffect inside your Button component in a page router project is possible.

[raphox]

During my research I read somewhere that in order to use the component to be rendered on the client side, I would have to import the component's original file by fetching it from within node_modules. But this seemed strange to me and I didn't understand the best way to expose the file from within my package.

[raphox]

I solved my issue.

I was installing my package from my local environment using: "metacomet-ui-components": "file:../metacomet-ui-components",.

Now I am using npm link. You can find more info here https://docs.npmjs.com/cli/commands/npm-link

I didn't try to use it from an npm remote repository, but I hope to have the same behavior as the npm link.

Thank you @serifcolakel

[raphox]

Sorry, @serifcolakel, I haven't solved it yet. After changing my component library, I didn't know I needed to execute the command npm link metacomet-ui-components again. After linking and getting the message changed 1 package, ... the exception persists 😞.

[raphox]

There seems to be an error with the npm link and React hooks. https://medium.com/bbc-product-technology/solving-the-problem-with-npm-link-and-react-hooks-266c832dd019