导出默认错误：默认导出不是页面中的 React 组件：“/”

Question

I am trying to build a next app and am receiving this error. Most the replies I see about this are around not using export default which I am doing!

I am basically trying to create a wrapper around my pages so that I can add things like a nav footer etc.

views/createView:

    const createView: FC = (View: FC) => {
      return (
        <div>
          <View/>
        </div>
      )
    }



export default createView;

pages/idx

import createView from 'views/createView';

const homePage: FC = () => {
  return (
    <div>hi</div>
  )
}

export default createView(homePage);

The code works when I directly return the view but not if I do anything else.

const createView: FC = (View: FC) => View

HELP:(

Answer 1

Maybe try

const createView: FC = (View: FC) => {
      return (
        <div>
          {View}
        </div>
      )
    }



export default createView;

Answer 2

Remember, component name always be CamelCase and router/page should be small letter. if you are using vscode then you can use this extension extension

and short code for component is rafce

Answer 3

Your instantiating the component and exporting it as a JSX Element, that's why you cant use it like a component because it's an instantiated value, not a function.

Shrinidhi Hegde's answer is correct, simply changing it from <View/> to {View} will solve your problem (because <View/> is attempting to create and render an element and {View} is the act of rendering a created element.).

I would strongly recommend turning your "createView" from a instantiated value to a function that creates a component as it flows nicer in React.

The example below will allow you to continue nicely by simply turning it into a function that creates an 'FC'.

const CreateView = (View: FC): FC => () => (
    <div>
        <View />
    </div>
);

export default CreateView;