Only expressions, functions or classes are allowed as the default export

The error “Only expressions, functions or classes are allowed as the default export” occurs when we try to export by default like statements other than expression, function or classes in react. Let us take an example of the below code which throws the error.

// This code throws the error
export default const MyComponent = () => 
{
    return(
        <p>My Component</p>
    );
}

In the above code const MyComponent = () => is a statement in which we are declaring and initializing constant MyComponent. we are trying to export that statement which causes an error. 

The declaration and initialization of a variable is a statement that cannot be default export. When we export variables, we need to write them in two separate lines. First, define the variable and on another line, export it. You cannot define and default export a variable in a single line.

We can solve the error in the above sample code by splitting by defining and exporting a variable into two lines of code as given below.

const MyComponent = () => {
  	return(
        <p>My Component</p>
    );
}
 
export default MyComponent;

In the above code, we declared the arrow function, and then it can be exported by default at bottom of the code.

We have another solution that uses regular javascript functions instead of arrow functions as given in the sample code.

export default function MyComponent(){
    return(
      <p>My Component</p>
  );
}

Here we have declared it as a regular javascript function instead of an arrow function. So it can be exported by default in the function declaration itself.

Conclusion

To solve the error “Only expressions, functions or classes are allowed as the default export”, write defining a variable and default export a variable in two separate lines. Use regular function instead of arrow functions to make function declaration and export default in single line.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.