Next.js error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[georgec-travellocal]

For some reason when I use component in a package which I then do yarn link to another project, Next.js thinks Glider is an object not a react component.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The same occurs with react-slick

Any idea why this is?

I tried dynamic import with ssr false but it still fails after the client side is ready.

[kevinfarrugia]

Hi @georgec-travellocal .

I had created a demo repository using NextJS without any issue.

Can you take a look and see if there is anything different in the implementation? Heads up I might be using an older version of Next.

[georgec-travellocal]

Yeah the error didn't exist with react-slick in next 12 but does with next 13.

On Sun, 23 Apr 2023, 11:48 Kevin Farrugia, @.***> wrote:

Hi @georgec-travellocal https://github.com/georgec-travellocal .

I had created a demo repository https://github.com/kevinfarrugia/next-react-glider using NextJS without any issue.

Can you take a look and see if there is anything different in the implementation? Heads up I might be using an older version of Next.

— Reply to this email directly, view it on GitHub https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519031186, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA . You are receiving this because you were mentioned.Message ID: @.***>

[georgec-travellocal]

Also, the difference is we are importing the component which contains

in a Next.js app as a package. The storybook for the package it works fine, it's only after importing it as a package does it get those errors. On Sun, 23 Apr 2023, 11:51 George Campbell, ***@***.***> wrote: > Yeah the error didn't exist with react-slick in next 12 but does with next > 13. > > On Sun, 23 Apr 2023, 11:48 Kevin Farrugia, ***@***.***> > wrote: > >> Hi @georgec-travellocal . >> >> I had created a demo repository >> using NextJS >> without any issue. >> >> Can you take a look and see if there is anything different in the >> implementation? Heads up I might be using an older version of Next. >> >> — >> Reply to this email directly, view it on GitHub >> , >> or unsubscribe >> >> . >> You are receiving this because you were mentioned.Message ID: >> ***@***.***> >> >

[kevinfarrugia]

Will update to Next 13 and take a look.

[kevinfarrugia]

Hi,

OK I can confirm the issue isn't related to Next 13.

Could you provide a simple code example so I can better understand your use-case? From my understanding, you have a module which is importing react-glider and this module is made available to your main app using yarn/npm link. Is this correct?

-- Kevin

On Sun, 23 Apr 2023 at 12:53, georgec-travellocal @.***> wrote:

Also, the difference is we are importing the component which contains

in a Next.js app as a package. The storybook for the package it works fine, it's only after importing it as a package does it get those errors. On Sun, 23 Apr 2023, 11:51 George Campbell, ***@***.***> wrote: > Yeah the error didn't exist with react-slick in next 12 but does with next > 13. > > On Sun, 23 Apr 2023, 11:48 Kevin Farrugia, ***@***.***> > wrote: > >> Hi @georgec-travellocal . >> >> I had created a demo repository >> using NextJS >> without any issue. >> >> Can you take a look and see if there is anything different in the >> implementation? Heads up I might be using an older version of Next. >> >> — >> Reply to this email directly, view it on GitHub >> < https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519031186 >, >> or unsubscribe >> < https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA > >> . >> You are receiving this because you were mentioned.Message ID: >> ***@***.***> >> > — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you commented.Message ID: ***@***.***>

[georgec-travellocal]

Yes that is correct. I am new to this codebase I am working on. The ui package is generated into a dist folder with rollup containing an index.cjs and index.mjs file.

In this ui package is components in a atomic design structure. In 3 components are sliders.

In the website which imports ui package has been stating the above error but only after updating to next 13.

This is with yarn link yes.

On Mon, 24 Apr 2023, 08:52 Kevin Farrugia, @.***> wrote:

Hi,

OK I can confirm the issue isn't related to Next 13.

Could you provide a simple code example so I can better understand your use-case? From my understanding, you have a module which is importing react-glider and this module is made available to your main app using yarn/npm link. Is this correct?

-- Kevin

On Sun, 23 Apr 2023 at 12:53, georgec-travellocal @.***> wrote:

Also, the difference is we are importing the component which contains

in a Next.js app as a package. The storybook for the package it works fine, it's only after importing it as a package does it get those errors. On Sun, 23 Apr 2023, 11:51 George Campbell, ***@***.***> wrote: > Yeah the error didn't exist with react-slick in next 12 but does with next > 13. > > On Sun, 23 Apr 2023, 11:48 Kevin Farrugia, ***@***.***> > wrote: > >> Hi @georgec-travellocal . >> >> I had created a demo repository >> using NextJS >> without any issue. >> >> Can you take a look and see if there is anything different in the >> implementation? Heads up I might be using an older version of Next. >> >> — >> Reply to this email directly, view it on GitHub >> < https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519031186 >, >> or unsubscribe >> < https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA > >> . >> You are receiving this because you were mentioned.Message ID: >> ***@***.***> >> > — Reply to this email directly, view it on GitHub < https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519032615 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AB5TQPRXPTHFIVLO3XHWYTDXCUC4LANCNFSM6AAAAAAXILI3HA . You are receiving this because you commented.Message ID: ***@***.***>

— Reply to this email directly, view it on GitHub https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519562277, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6VJTYNRJFSJEB774AYOJNLXCYWLHANCNFSM6AAAAAAXILI3HA . You are receiving this because you were mentioned.Message ID: @.***>

[georgec-travellocal]

The code I'm using for the glider is like this:

import Glider from 'react-glider'; import 'glider-js/glider.min.css'; ... const gliderRef = useRef(null); ... <Glider draggable={swipeToSlide} slidesToShow={slideCount} slidesToScroll={1} ref={gliderRef} onAnimated={evt => { const nextSlideIndex = evt.detail.value setIndex(nextSlideIndex); beforeChange?.(currentIndex, nextSlideIndex); }}

{children}

It works fine in the storybook of the ui package, but when we use these glider components in the package from the next.js website, it throws that error.

On Mon, 24 Apr 2023 at 09:02, George Campbell < @.***> wrote:

Yes that is correct. I am new to this codebase I am working on. The ui package is generated into a dist folder with rollup containing an index.cjs and index.mjs file.

In this ui package is components in a atomic design structure. In 3 components are sliders.

In the website which imports ui package has been stating the above error but only after updating to next 13.

This is with yarn link yes.

On Mon, 24 Apr 2023, 08:52 Kevin Farrugia, @.***> wrote:

Hi,

OK I can confirm the issue isn't related to Next 13.

Could you provide a simple code example so I can better understand your use-case? From my understanding, you have a module which is importing react-glider and this module is made available to your main app using yarn/npm link. Is this correct?

-- Kevin

On Sun, 23 Apr 2023 at 12:53, georgec-travellocal @.***> wrote:

Also, the difference is we are importing the component which contains

in a Next.js app as a package. The storybook for the package it works fine, it's only after importing it as a package does it get those errors. On Sun, 23 Apr 2023, 11:51 George Campbell, ***@***.***> wrote: > Yeah the error didn't exist with react-slick in next 12 but does with next > 13. > > On Sun, 23 Apr 2023, 11:48 Kevin Farrugia, ***@***.***> > wrote: > >> Hi @georgec-travellocal . >> >> I had created a demo repository >> using NextJS >> without any issue. >> >> Can you take a look and see if there is anything different in the >> implementation? Heads up I might be using an older version of Next. >> >> — >> Reply to this email directly, view it on GitHub >> < https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519031186 >, >> or unsubscribe >> < https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA > >> . >> You are receiving this because you were mentioned.Message ID: >> ***@***.***> >> > — Reply to this email directly, view it on GitHub < https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519032615 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AB5TQPRXPTHFIVLO3XHWYTDXCUC4LANCNFSM6AAAAAAXILI3HA . You are receiving this because you commented.Message ID: ***@***.***>

— Reply to this email directly, view it on GitHub https://github.com/kevinfarrugia/react-glider/issues/143#issuecomment-1519562277, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6VJTYNRJFSJEB774AYOJNLXCYWLHANCNFSM6AAAAAAXILI3HA . You are receiving this because you were mentioned.Message ID: @.***>

[coreydunkin]

Unsure if this is the same issue as yours @georgec-travellocal but had a similar issue where react-glider would work inside storybook but wouldn't work when exposed to a Nextjs 13 application. I kept getting the error "Cannot set properties of undefined (setting 'Glider')"

The workaround was to import the react-glider library inside a useEffect like so:

const [Glider, setGlider] = useState(null); const gliderRef = useRef();

useEffect(() => { import('react-glider').then((GliderModule) => { setGlider(() => GliderModule.default); }); }, []);

This removes the error after storybook is bundled and exposed to our NextJS app.