next/image error - React.jsx: type is invalid -- expected a string (for built-in components) or a class/function but got: object

[ajayv1]

Description

I have created one component library using next/js. Using rollup to build it and wanted to use it in other projects. When component uses next/image then using that component in another projects throw above error.

At first, I thought this was type error but it is not. And I am also thinking this might come for next/link, next/router etc.

Specifications

• Bit version:
• Node version: 20
• npm / yarn version:
• Platform: Mac
• Bit compiler (include version):
• Bit tester (include version):

Context and additional information

I have created a component library using rollup. It's exporting one component let's say Basic.

import Image from "next/image";

type BasicProps = {
  logoSrc: string;
};

export default function Basic({ logoSrc }: BasicProps) {
  return (
    <Image src={logoSrc} alt="Logo" width={74} height={37} priority />
  );
}

When I am using this library in another project -

import Basic from "ui-library/Basic";

<Basic logoSrc="/images/new-logo-black.png" />

image is present in the /public of the extending repo.

On running next dev build is failing with logs -

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. at Basic (/Users/Documents/work/code/new-car/node_modules/ui-library/dist/atoms/Basic/index.js:7:22)

I have tried many things like adding next.config.js file in the component library, and adding images there but nothing worked. Although it logging a type issue but it doesn't seem to be a type issue.

nextjs is added as a peer deps in the component library.

[itaymendel]

from your question, i am not sure you are using Bit to build your component.
can you please share more information as for how you set up the rollup build pipeline?

it seems like you need to compile your library. also make sure nextjs is a peerdepedency