ES Modules import and export in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this ES module import code?

Consider two files: mathUtils.mjs and app.mjs.

mathUtils.mjs exports a named function square.
In app.mjs, we import square and call it with 4.

What will console.log(result) print?

Node.js

/* mathUtils.mjs */
export function square(x) {
  return x * x;
}

/* app.mjs */
import { square } from './mathUtils.mjs';
const result = square(4);
console.log(result);

A undefined

B 16

C NaN

D Error: Cannot find module './mathUtils.mjs'

💡 Hint

Remember that named exports must be imported with curly braces matching the exported name.

The function square is exported as a named export and imported correctly. Calling square(4) returns 16, which is logged.

❓ component_behavior

intermediate

What happens when importing a default export incorrectly?

Given utils.mjs exports a default function:

export default function greet() { return 'Hello'; }

Which import statement in app.mjs will cause a runtime error when calling greet()?

A import { greet } from './utils.mjs'; console.log(greet());

B import greet from './utils.mjs'; console.log(greet());

C import * as greet from './utils.mjs'; console.log(greet());

D import { default as greet } from './utils.mjs'; console.log(greet());

💡 Hint

Default exports are imported without curly braces.

Option A tries to import a named export 'greet' which does not exist, causing greet to be undefined and calling greet() throws a TypeError.

🔧 Debug

advanced

Why does this ES module import cause a SyntaxError?

Look at this code snippet in app.mjs:

import { add } from './math.mjs'

Running this code causes a SyntaxError. What is the most likely cause?

Node.js

import { add } from './math.mjs';

A Running the file without the --experimental-modules flag in Node.js 12

B Missing semicolon at the end of the import statement

C Import statements must be at the bottom of the file

D Using single quotes instead of double quotes in import path

💡 Hint

Check Node.js version and module support.

Node.js versions before 13 require the --experimental-modules flag to run ES modules. Without it, import statements cause SyntaxError.

❓ state_output

advanced

What is the value of variable 'count' after these imports and mutations?

In counter.mjs we have:

export let count = 0;
export function increment() { count++; }

In app.mjs:

import { count, increment } from './counter.mjs';
increment();
console.log(count);

What will be logged?

A Error: Assignment to constant variable

B undefined

C 0

D 1

💡 Hint

ES module imports are live bindings: mutations to the exported variable from within the module are visible to importers.

Imports in ES modules are live bindings to the exports. The increment() function mutates the shared 'count' variable, so the imported binding sees the updated value of 1.

🧠 Conceptual

expert

Which option correctly re-exports a named export with a new name?

You want to re-export a named export foo from moduleA.mjs as bar in moduleB.mjs.

Which code in moduleB.mjs achieves this?

A export * as bar from './moduleA.mjs';

B import { foo as bar } from './moduleA.mjs'; export { foo };

C export { foo as bar } from './moduleA.mjs';

D export { bar } from './moduleA.mjs';

💡 Hint

Use export with alias syntax.

Option C correctly re-exports 'foo' as 'bar'. Option C imports with alias but exports original name 'foo' which is undefined here. Option C exports all as 'bar' namespace, not a renamed export. Option C tries to export 'bar' which does not exist in moduleA.

Practice

1. What is the main purpose of using export and import in Node.js ES Modules?

easy

A. To create new variables inside a file

B. To run JavaScript code faster in Node.js

C. To convert JavaScript code into another language

D. To share code between different files by exporting and importing parts

Solution

1. Step 1: Understand the role of export

   The export keyword allows parts of a file (like functions or variables) to be shared with other files.

2. Step 2: Understand the role of import

   The import keyword is used to bring those shared parts into another file to use them.

3. Final Answer:

   To share code between different files by exporting and importing parts -> Option D

4. Quick Check:

   Export and import = share code [OK]

Hint: Export shares code, import uses it elsewhere [OK]

Common Mistakes:

• Thinking export/import changes code speed
• Confusing export with variable creation
• Believing export/import converts languages

2. Which of the following is the correct syntax to export a function named greet in an ES Module file?

easy

A. export function greet() {}

B. module.exports = greet;

C. export = greet;

D. exports.greet = function() {}

Solution

1. Step 1: Identify ES Module export syntax

   In ES Modules, use export function functionName() {} to export a function.

2. Step 2: Check other options for CommonJS syntax

   Options B and D use CommonJS style, not ES Modules. export = greet; is invalid syntax.

3. Final Answer:

   export function greet() {} -> Option A

4. Quick Check:

   ES Modules export function = export function [OK]

Hint: Use 'export function' for ES Modules exports [OK]

Common Mistakes:

• Using CommonJS syntax in ES Modules
• Writing invalid export syntax
• Confusing export default with named export

3. Given the following files, what will be logged when running node main.js?

// utils.js
export const value = 5;
export function double(x) { return x * 2; }

// main.js
import { value, double } from './utils.js';
console.log(double(value));

medium

A. 10

B. 5

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand the imports and exports

   The file utils.js exports a constant value = 5 and a function double that multiplies input by 2.

2. Step 2: Trace the code in main.js

   It imports value and double, then calls double(value) which is double(5), returning 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   double(5) = 10 [OK]

Hint: Import exports correctly, then call functions with values [OK]

Common Mistakes:

• Forgetting to add .js extension in import
• Confusing export default with named exports
• Expecting value instead of double(value)

4. What is the error in the following code snippet?

// math.js
export function add(a, b) { return a + b; }

// app.js
import { add } from './math';
console.log(add(2, 3));

medium

A. Function add is not exported correctly

B. Cannot import named exports with curly braces

C. Missing file extension in import statement

D. Using CommonJS syntax in ES Modules

Solution

1. Step 1: Check import statement syntax

   The import statement uses import { add } from './math'; but misses the .js extension required in Node.js ES Modules.

2. Step 2: Confirm export syntax is correct

   The function add is correctly exported with export function add(), so no error there.

3. Final Answer:

   Missing file extension in import statement -> Option C

4. Quick Check:

   Node.js ES Modules need file extensions [OK]

Hint: Always include .js extension in ES Module imports [OK]

Common Mistakes:

• Omitting file extensions in import paths
• Confusing CommonJS and ES Module syntax
• Assuming named exports don't use curly braces

5. You have two files:

// data.js
const secret = 'hidden';
export const visible = 'shown';
export default function getSecret() { return secret; }

// index.js
import getSecret, { visible } from './data.js';
console.log(visible);
console.log(getSecret());

What will be the output when running node index.js?

hard

A. SyntaxError due to mixed import syntax

B. shownhidden

C. shownundefined

D. hiddenshown

Solution

1. Step 1: Understand default and named exports

   getSecret is the default export function returning secret. visible is a named export with value 'shown'.

2. Step 2: Analyze import and console.log calls

   import getSecret, { visible } correctly imports default and named exports. Logging visible prints 'shown'. Calling getSecret() returns 'hidden'.

3. Final Answer:

   shown
   hidden -> Option B

4. Quick Check:

   Default + named import works = shown, hidden [OK]

Hint: Default import first, named imports in braces [OK]

Common Mistakes:

• Mixing default and named imports incorrectly
• Expecting secret variable to be exported directly
• Confusing order of import syntax