How to import and export a module on the same line in JavaScript

In this quick post we will be covering how to import and export a module on the same line in JavaScript so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - Needing to export an imported module in JavaScript

You may find yourself in a position where you need to export an imported module to make it easier to find. This is pretty common in component libraries or in npm modules where you want to expose certain modules at the top level of your JavaScript library.

The problem is how can you do this in the most efficient way possible so that you don’t have to import every module individually and then export each module individually as well.

Here is an example of the problem:

// index.js
import myModule from "./myModule"
import mySecondModule from "./mySecondModule"
import { myNamedModule } from "./myNamedModule"

export default myModule
export { mySecondModule, myNamedModule }

As you can see this could get pretty tedious to have to do for every module in your library.

The Solution - How to import and export a module on the same line in JavaScript

In JavaScript we are able to import and export a module on the same line and it is pretty easy to do.

Let’s take a look at how we can do it in this example based on the above example so you can see the differences:

export { default } from "./myModule"
export { default as mySecondModule } from "./mySecondModule"
export { myNamedModule } from "./myNamedModule"

As you can see it is much easier and halves the amount of code we need to write.

For default exports, all we need to do is to export the default.

For named exports from default modules all we need to do is export them as a name that we give them via default as mySecondModule.

Lastly, for named exports from named imports we just need to replace the import keyword with export.

Summary

There we have the quick fix to how to import and export a module on the same line in JavaScript, if you want more like this be sure to check out some of my other posts!