Blog / Quick-fixes

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

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

In this post find the quick and simple solution for how to import and export a module on the same line in JavaScript - Quick Fix Series!

Will MaygerWill Mayger
August 02, 2021
Article

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!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.