Support for using arrow functions for React Components

[noverby]

trafficstars

The following code does not run:

import React from "react";
import { Button } from "https://esm.sh/@material-ui/core";

export default () => {
  return <Button>Test</Button>;
};

It results in the error:

400 - Module "Page Component: /pages/index.tsx" should export a React Component as default

[shadowtime2000]

Currently our function to detect if a function is a React component doesn't support arrow functions. @ije Do you know any way it could be done?

[noverby]

Next.js uses isValidElementType from react-is to verify whether the objects, returned from either type of functions, are React components. Source

[ije]

i don't think so react-is can get this, in fact the isLikelyReactComponent function is copied from react repo, and the unnamed arrow function component also don't support fast-refresh. try to use const snytax:

const A = () =><Button>Test</Button>
export default A

[ije]

this should be handle in compiler