error message

The error is self-explanatory as it is. The error "Only one default export allowed per module" occurs on React when exporting more than one function as default. Here is an example of the code that would throw this error.

export default function App() {
  return <div>App</div>;
  );
}

export function FunctionTwo() {
  return <div>Fucntion Two</div>;
}
error code

As you can see, there are two functions with "export default" keywords in front of the function definition.

You can export a function in two ways, "default" export and "named" export.

Default export

The functions written in the above code are of default export type. What it means is that when you import a javascript file, this function will be imported by default. Hence, there cannot be two default export functions in a single javascript file.

export default function App() {
  return (
  return <div>App</div>;
  );
}
default export

Importing a default exported function is as easy as importing the file itself. You can also import the function with any name you like.  See the example below:

import React from "react";
import AppDefault from "./App";

export default function Import() {
  return (
    <div>
      <AppDefault />
    </div>
  );
}
default import

Named export

Functions that are exported without the default keyword. You can have any number of named export in a javascript file. For example:

export function FunctionTwo() {
  return <div>Fucntion Two</div>;
}

export function FunctionThree() {
  return <div>Fucntion Three</div>;
}

export function FunctionFour() {
  return <div>Fucntion Four</div>;
}
named export

To import these functions into another javascript file, we need to perform what we call a "named import". It will look as follows:

import React from "react";
import { FunctionTwo, FunctionThree, FunctionFour } from "./App";

export default function Import() {
  return (
    <div>
      <FunctionTwo />
      <FunctionThree />
      <FunctionFour />
    </div>
  );
}
named import

In "named imports", the importing function name should be exactly in its definition. Named imports are wrapped in curly braces to distinguish from default imports.

In real-world projects, it is a common practice to use "named exports" through out the project to make effecient use of the ediotrs auto import feature as well as to maintain consistency acrross the codebase.

Combined usage

You can import both types of export from a javascript file in a single line like in the example below:

import React from "react";
import App, { FunctionTwo, FunctionThree, FunctionFour } from "./App";

export default function Import() {
  return (
    <div>
      <App />
      <FunctionTwo />
      <FunctionThree />
      <FunctionFour />
    </div>
  );
}
combined default and named imports

Conclusion

The error "Only one default export allowed per module" occurred because of the existence of multiple default exports. The above examples gave an idea of how you can import "default export" and "named export" functions in a React project.

Thank you for reading, please visit my home page to see more articles which might interest you.