I have this code in my pages/index.js file:

import React from 'react';
import dynamic from 'next/dynamic';

const TVChartContainer = dynamic(
    () =>
        import('../ponents/TVChartContainer').then(mod => mod.TVChartContainer),
    { ssr: false },
);

export default () => <TVChartContainer />;

And this gives me an error.

Anonymous arrow functions cause Fast Refresh to not preserve local ponent state. Please add a name to your function, for example:

Before export default () => ;

After const Named = () => ; export default Named;

A codemod is available to fix the most mon cases: /codemod-ndc

And then I tried to export the ponent this way.

export default  TVChartContainer;

This also seems not fixing the issue. How do I fix this issue?

I have this code in my pages/index.js file:

import React from 'react';
import dynamic from 'next/dynamic';

const TVChartContainer = dynamic(
    () =>
        import('../ponents/TVChartContainer').then(mod => mod.TVChartContainer),
    { ssr: false },
);

export default () => <TVChartContainer />;

And this gives me an error.

Anonymous arrow functions cause Fast Refresh to not preserve local ponent state. Please add a name to your function, for example:

Before export default () => ;

After const Named = () => ; export default Named;

A codemod is available to fix the most mon cases: https://nextjs.link/codemod-ndc

And then I tried to export the ponent this way.

export default  TVChartContainer;

This also seems not fixing the issue. How do I fix this issue?

• javascript
• reactjs
• next.js

1 Answer 1

As the error message suggests, you need to add a name to the function ponent you're exporting.

const IndexPage = () => <TVChartContainer />

export default IndexPage;