ArnaudBarre / eslint-plugin-react-refresh

Validate that your components can safely be updated with Fast Refresh
MIT License
216 stars 14 forks source link

How can I prevent eslint error in Next.js's getServerSideProps? #49

Closed zebra0303 closed 2 months ago

zebra0303 commented 2 months ago

Hello, I'm trying to use the eslint-plugin-react-refresh rule for a team project. However, an eslint error occurs even when exporting getServerSideProps in the page component of Next.js. Is there anyone who has solved this issue or knows a solution without creating a new getServerSideProps function file?

[package.json]

"eslint-plugin-react-refresh": "^0.4.11",

[ESLint Config]

'react-refresh/only-export-components': ['error', { allowConstantExport: true }],

[Page Code Sample]

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';

interface Repo {
  name: string;
  stargazers_count: number;
}

// Here is an eslint error !!!
// Fast refresh only works when a file only exports components. 
// Use a new file to share constants or functions between components.eslint(react-refresh/only-export-components)
export const getServerSideProps = (async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo: Repo = await res.json();

  return { props: { repo } };
}) satisfies GetServerSideProps<{ repo: Repo }>;

export default function Page({ repo }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  );
}
ArnaudBarre commented 2 months ago

I never tried but using https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#allowexportnames-v044 with ["getServerSideProps"] should works?

zebra0303 commented 2 months ago

I never tried but using https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#allowexportnames-v044 with ["getServerSideProps"] should works?

@ArnaudBarre, Thanks for your reply. It works fine after I changed the plugin options as below.

   'react-refresh/only-export-components': [
      'warn',
      {
        allowConstantExport: true,
        allowExportNames: ['getServerSideProps'],
      },
    ],