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. #143
Comments
|
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. |
|
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
<#143 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Also, the difference is we are importing the component which contains
<Glider> 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 <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
> <#143 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/A6VJTYL7CNT66BBYZKBSUA3XCUCIDANCNFSM6AAAAAAXILI3HA>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
|
|
Will update to Next 13 and take a look. |
|
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
<Glider> 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 <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
>> <
#143 (comment)
>,
>> 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
<#143 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AB5TQPRXPTHFIVLO3XHWYTDXCUC4LANCNFSM6AAAAAAXILI3HA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
|
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
> <Glider> 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 <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
> >> <
>
#143 (comment)
> >,
> >> 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
> <
#143 (comment)
>,
> 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
<#143 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A6VJTYNRJFSJEB774AYOJNLXCYWLHANCNFSM6AAAAAAXILI3HA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
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<any>(null);
...
<Glider
draggable={swipeToSlide}
slidesToShow={slideCount}
slidesToScroll={1}
ref={gliderRef}
onAnimated={evt => {
const nextSlideIndex = evt.detail.value
setIndex(nextSlideIndex);
beforeChange?.(currentIndex, nextSlideIndex);
}}
{children}
</Glider>
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
> > <Glider> 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 <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
> > >> <
> >
> #143 (comment)
> > >,
> > >> 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
> > <
> #143 (comment)
> >,
> > 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
> <#143 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/A6VJTYNRJFSJEB774AYOJNLXCYWLHANCNFSM6AAAAAAXILI3HA>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
|
|
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); useEffect(() => { This removes the error after storybook is bundled and exposed to our NextJS app. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-slickAny idea why this is?
I tried dynamic import with ssr false but it still fails after the client side is ready.
The text was updated successfully, but these errors were encountered: