Next.js Components: Error: error: Return statement is not allowed here

Question

I am running into an error when I add a new component into my Next.js Project where it gives the following:

`./components/GridMember.js Error: error: Return statement is not allowed here

| 6 | return (test); | ^^^^^^^^^^^^^^^^^^^^^^^^^

Caused by: 0: failed to process js file 1: error was recoverable, but proceeding would result in wrong codegen 2: Syntax Error`

[error][1] [1]: https://i.sstatic.net/PU5z5.png

I am unsure what is causing this as I should be able to return what I have. I have pasted the code below to the component

`import styles from './GridMember.module.css'

export default GridMember()
{
    return (<div>test</div>);
}`

and then the page has the following:

`import GridMember from "../components/GridMember";

export default function Work()
{
    return(
    <div>WORKING
        <GridMember/>
    </div>
    );
}`

Any suggestions are appreciated!

export default GridMember() > export default function GridMember() — DeveloperLV
– DeveloperLV, Commented Feb 14, 2022 at 16:26

lucky930 · Accepted Answer · 2022-02-14 16:26:15Z

3

you are missing function so you must write the code like this

import styles from './GridMember.module.css'


export default function GridMember()
{
    return (<div>test</div>);
}

answered Feb 14, 2022 at 16:26

lucky930

965 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! That worked.... silly of me to have missed that :D (It's monday...)

user18854749 · Accepted Answer · 2022-12-07 12:56:46Z

1

in other case the below code also "Return statement is not allowed here". in such cases check the closing curly brace.

export default function Work()
{
//..........
}
    return(
    <div>WORKING
        <GridMember/>
    </div>
    );

export default function Work()
{
//..........

    return(
    <div>WORKING
        <GridMember/>
    </div>
    );
}

answered Dec 7, 2022 at 12:56

user18854749

112 bronze badges