Import maps for cleaner imports in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does an import map affect module imports in Deno?

Given an import map that maps "utils/" to "./src/utils/", what will be the resolved path when importing "utils/helpers.ts"?

Deno

import helpers from "utils/helpers.ts";

A "./utils/helpers.ts"

B "./src/helpers.ts"

C "./src/utils/helpers.ts"

D "./helpers.ts"

💡 Hint

Think about how the import map replaces the prefix in the import path.

The import map replaces the prefix "utils/" with "./src/utils/", so "utils/helpers.ts" becomes "./src/utils/helpers.ts".

📝 Syntax

intermediate

Which import map JSON is valid for Deno?

Choose the correctly structured import map JSON for mapping "lib/" to "./libraries/".

A { "imports": [ { "lib/": "./libraries/" } ] }

B { "imports": { "lib/": "./libraries/" } }

C { "import": { "lib/": "./libraries/" } }

D { "imports": { "lib": "./libraries/" } }

💡 Hint

Check the exact key name and value types required by Deno's import map spec.

Deno requires the key "imports" with an object mapping prefixes to paths. Option B matches this exactly.

🔧 Debug

advanced

Why does this import fail despite the import map?

Given this import map:

{ "imports": { "components/": "./src/components/" } }

And this import statement:

import Button from "component/Button.ts";

Why does the import fail?

Deno

import Button from "component/Button.ts";

A The import path prefix "component/" does not match the import map key "components/" exactly.

B The import map path "./src/components/" is invalid and causes failure.

C Deno requires file extensions to be omitted in import statements.

D Import maps cannot be used with relative paths.

💡 Hint

Check the exact spelling and trailing slashes in the import path and map keys.

The import map key is "components/" but the import uses "component/" (missing 's'). Import maps require exact prefix matches including trailing slashes.

❓ state_output

advanced

What is the output of this Deno script using import maps?

Given the import map:

{ "imports": { "utils/": "./lib/utils/" } }

And the file structure:

• ./lib/utils/math.ts exports export const add = (a, b) => a + b;

And this script:

import { add } from "utils/math.ts";
console.log(add(2, 3));

What will be printed when running this script with the import map?

Deno

import { add } from "utils/math.ts";
console.log(add(2, 3));

A NaN

B SyntaxError: Unexpected token

C ReferenceError: add is not defined

D 5

💡 Hint

Consider how the import map resolves the path and what the add function returns.

The import map resolves "utils/math.ts" to "./lib/utils/math.ts" which exports add correctly. Calling add(2, 3) returns 5.

🧠 Conceptual

expert

What is a key benefit of using import maps in Deno projects?

Choose the best explanation of why import maps improve Deno project development.

A They allow aliasing long or complex module paths to shorter, cleaner names, improving code readability and maintainability.

B They automatically optimize and minify imported modules for faster runtime performance.

C They enforce strict typing on imported modules to prevent runtime errors.

D They replace the need for any relative or absolute paths in import statements with only bare specifiers.

💡 Hint

Think about how import maps affect the way you write import paths.

Import maps let you create aliases for long or nested paths, making imports shorter and easier to read. They do not minify, enforce typing, or eliminate all path types.

Practice

1. What is the main purpose of using import maps in Deno?

easy

A. To automatically update all dependencies to their latest versions

B. To speed up the execution of Deno scripts

C. To compile TypeScript files into JavaScript

D. To replace long URLs with short, easy-to-read names in imports

Solution

1. Step 1: Understand what import maps do

   Import maps allow you to map long URLs to short names, making imports cleaner.

2. Step 2: Identify the main benefit

   This makes code easier to read and maintain by avoiding long URLs in import statements.

3. Final Answer:

   To replace long URLs with short, easy-to-read names in imports -> Option D

4. Quick Check:

   Import maps = cleaner imports [OK]

Hint: Import maps shorten URLs to simple names [OK]

Common Mistakes:

• Thinking import maps speed up code execution
• Confusing import maps with dependency updates
• Believing import maps compile code

2. Which command correctly runs a Deno script using an import map file named imports.json?

easy

A. deno run --importmap imports.json script.ts

B. deno run --import-map=imports.json script.ts

C. deno run --map-import=imports.json script.ts

D. deno run -importmap imports.json script.ts

Solution

1. Step 1: Recall the correct flag syntax

   The correct flag to specify an import map file is --import-map=.

2. Step 2: Match the command with correct syntax

   deno run --import-map=imports.json script.ts uses --import-map=imports.json, which is the correct form.

3. Final Answer:

   deno run --import-map=imports.json script.ts -> Option B

4. Quick Check:

   Use --import-map=filename [OK]

Hint: Use double dash and equal sign for import map flag [OK]

Common Mistakes:

• Using single dash instead of double dash
• Missing equal sign between flag and filename
• Using incorrect flag names like --map-import

3. Given this imports.json file:

{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}

And this code:

import _ from "lodash";
console.log(typeof _);

What will be printed when running with --import-map=imports.json?

medium

A. "object"

B. "undefined"

C. SyntaxError

D. "function"

Solution

1. Step 1: Understand import map effect

   The import map maps "lodash" to the URL, so the import fetches lodash library.

2. Step 2: Check lodash type

   Lodash is an object with many functions, so typeof _ returns "object".

3. Final Answer:

   "object" -> Option A

4. Quick Check:

   Import maps load modules correctly = "object" [OK]

Hint: Mapped imports load modules, typeof lodash is object [OK]

Common Mistakes:

• Expecting 'undefined' because of missing URL
• Thinking import maps cause syntax errors
• Assuming lodash is a function type

4. You wrote this import map file imports.json:

{
  "imports": {
    "react": "https://cdn.skypack.dev/react"
  }
}

But running deno run --import-map=imports.json app.ts gives an error: Cannot resolve module "react". What is the likely cause?

medium

A. The import map file is not valid JSON

B. The import map file is not passed correctly to the command

C. The import statement in app.ts uses a different name than "react"

D. Deno does not support import maps

Solution

1. Step 1: Check import map correctness

   The JSON looks valid and the flag is used correctly, so those are unlikely causes.

2. Step 2: Check import statement in app.ts

   If the import statement uses a different name than "react", Deno won't find it in the map and errors.

3. Final Answer:

   The import statement in app.ts uses a different name than "react" -> Option C

4. Quick Check:

   Import name must match map key [OK]

Hint: Import name must exactly match import map key [OK]

Common Mistakes:

• Assuming import map file is invalid without checking
• Forgetting to pass import map flag
• Believing Deno lacks import map support

5. You want to use two libraries, lodash and dayjs, with import maps to keep your code clean. Your imports.json is:

{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash",
    "dayjs": "https://cdn.skypack.dev/dayjs"
  }
}

In your code, you write:

import _ from "lodash";
import dayjs from "dayjs";
console.log(dayjs().format());

What must you do to run this code correctly in Deno?

hard

A. Run with deno run --import-map=imports.json script.ts and ensure internet access

B. Run with deno run script.ts only, import maps are automatic

C. Include both libraries locally and import from relative paths

D. Use --allow-net flag without import maps

Solution

1. Step 1: Recognize import map usage

   To use import maps, you must run Deno with the --import-map flag pointing to your map file.

2. Step 2: Understand network requirement

   Since the URLs are remote, Deno needs internet access to fetch them, so network permission is needed.

3. Final Answer:

   Run with deno run --import-map=imports.json script.ts and ensure internet access -> Option A

4. Quick Check:

   Use --import-map and allow network [OK]

Hint: Always use --import-map flag and allow network for remote URLs [OK]

Common Mistakes:

• Running without --import-map flag
• Assuming import maps work automatically
• Not allowing network access for remote imports