Discuss modules.

In JavaScript, modules are a way to break up your code into separate files. This makes your code more organized, maintainable, reusable and easier to debug. Previously, there was no native support for modules in JavaScript. introduced in ES6 each module is represented by a separate '.js' file. We can use the 'import' or 'export' statement in a module to import or export variables, functions, classes or any other component from/to different files and modules.

javascript

Difficulty: 5/10

Topics: ES6 modules, CommonJS interop, dynamic imports

Scenario Questions

0-2 years experience

1
You're adding a utility function to a React component file. How would you extract it into a separate module and import it back?
2
What happens if you try to import a CommonJS module that only uses module.exports = ... using ES6 import syntax?
3
You see 'import { foo } from './bar'' but bar.js only has 'export default foo'. What's the error and how do you fix it?

2-5 years experience

1
We're lazy-loading a heavy charting library only when a user clicks a tab. Show me how you'd structure the dynamic import and handle the loading state.
2
A teammate's PR introduces a circular dependency between auth.js and api.js. Walk me through how you'd debug and resolve it without breaking tests.
3
Our bundle size jumped 200KB after adding a date library. How would you use dynamic imports and tree-shaking to reduce the impact?

5-8 years experience

1
We're migrating a large codebase from CommonJS to ES modules. What's your strategy for incremental migration without a big-bang rewrite?
2
Design a module federation setup for a micro-frontend architecture where three teams share a design system but deploy independently.
3
A third-party library ships both ESM and CJS builds but our bundler picks the wrong one, causing duplicate code. How do you diagnose and fix the resolution?

8+ years experience

1
We're standardizing module conventions across 50+ repos in a monorepo. How do you enforce consistent export patterns, versioning, and upgrade paths without blocking teams?
2
A critical legacy system uses a custom module loader. We need to integrate modern ESM packages without rewriting the loader. What's your integration strategy?
3
Our CI builds are slow due to redundant module graph computation. Propose a caching and invalidation strategy for module resolution at scale.

Follow-up Questions

❓How do you handle a circular dependency between two modules?
❓What's the difference between default and named exports in tree-shaking?
❓When would you use dynamic import over static import?