CODEWITHSUNDEEP
javascriptreactjsnext.js
itamar
itamar

Reputation: 3967

Importing external React components to nextJS project

I have a functional component in my own library that I'm importing into a nextJS project, and for some reason it's not recognized as a react functional component.

Example of my library code:

import React, { useState } from 'react';
export function Dialog(){
    const [open, setOpen] = useState(false);

    return (<>
             // some jsx logic
            </>)

}

importing it in my nextJS component:

import { Dialog } from '@myNamespace/library';

When I try to use

<Dialog />

I get this error:

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/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

So I logged out a local react component with the Dialog and found that while the local react component seems to be on the namespace react__WEBPACK_IMPORTED_MODULE_1___default, my imported component just remains a plain function instead of a react component.

Any ideas as to why NextJS isn't importing my function as a react component?

EDIT:

Here's something really interesting: When I remove the hook, nextJS seems to think it is a react component. But when I put the hook in, it doesn't - and throws that error.

SOLUTION For anyone who's interested - the issue was that my package was npm link into my project. So in that case there's issues with it not packaging up the components correctly.

Upvotes: 2

Views: 1533

Answers (1)

Brad Ball
Brad Ball

Reputation: 619

It is possible that your react and react-dom isn't updated to the standard for hooks try yarn add [email protected] [email protected]

Upvotes: 0

Related Questions