Importing from npm packages in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Deno code importing an npm package?

Consider this Deno script that imports the lodash package from npm and uses its capitalize function. What will be printed when running this code?

Deno

import { capitalize } from "npm:lodash";
console.log(capitalize("hello world"));

A "Hello World"

B SyntaxError due to import

C "Hello world"

D "hello world"

💡 Hint

Think about what the capitalize function does to the first letter only.

The lodash capitalize function converts the first character to uppercase and the rest to lowercase. So "hello world" becomes "Hello world".

📝 Syntax

intermediate

Which import statement correctly imports the express package in Deno from npm?

You want to use the express package from npm in your Deno project. Which import statement is syntactically correct?

A import * as express from "npm:express";

B import { express } from "npm:express";

C const express = require("npm:express");

D import express from "npm:express";

💡 Hint

Deno uses ES module syntax and supports default imports from npm packages.

Deno supports ES module syntax and allows default imports from npm packages using the "npm:" prefix. Option D uses the correct default import syntax.

🔧 Debug

advanced

Why does this Deno code fail to import the chalk npm package?

This Deno code tries to import chalk from npm but throws an error. What is the most likely cause?

Deno

import chalk from "npm:chalk";
console.log(chalk.green("Success!"));

A The chalk package version installed is incompatible with Deno's npm support.

B Deno does not support importing npm packages with native ESM yet.

C The import path "npm:chalk" is incorrect; it should be a URL.

D The chalk package requires a named import, not a default import.

💡 Hint

Check if the npm package supports ESM or if the version is compatible with Deno's npm loader.

Some npm packages like chalk have versions that do not fully support ESM or have dependencies incompatible with Deno's npm loader. Using an incompatible version causes import errors.

❓ state_output

advanced

What is the output of this Deno script importing and using uuid from npm?

This Deno script imports the v4 function from the uuid npm package and logs a generated UUID. What will be the output format?

Deno

import { v4 } from "npm:uuid";
console.log(v4());

A An object with UUID properties

B A string like "550e8400-e29b-41d4-a716-446655440000"

C A number representing the UUID

D Undefined because v4 is not a function

💡 Hint

UUID v4 generates a random unique identifier string in a specific format.

The v4 function from uuid generates a random UUID string in the format of 8-4-4-4-12 hexadecimal characters separated by dashes.

🧠 Conceptual

expert

Which statement about importing npm packages in Deno is TRUE?

Select the correct statement about how Deno handles importing npm packages.

A Deno can import npm packages using the "npm:" prefix, but some packages may need compatibility adjustments.

B Deno requires explicit permission flags to import npm packages due to security concerns.

C Deno automatically converts all CommonJS npm packages to ES modules without any issues.

D Deno only supports importing npm packages from URLs, not by package name.

💡 Hint

Think about Deno's npm support and compatibility with CommonJS packages.

Deno supports importing npm packages using the "npm:" prefix, but not all packages work out of the box due to differences between CommonJS and ES modules. Some packages require adjustments.

Practice

1. In Deno, how do you import a package from npm?

easy

A. Use import pkg from "deno:package-name";

B. Use import pkg from "https://npmjs.com/package-name";

C. Use import pkg from "npm:package-name";

D. Use require("package-name")

Solution

1. Step 1: Understand Deno's npm import syntax

   Deno uses the prefix npm: to import packages from npm directly.

2. Step 2: Identify the correct import statement

   The correct syntax is import pkg from "npm:package-name"; which tells Deno to fetch from npm.

3. Final Answer:

   Use import pkg from "npm:package-name"; -> Option C

4. Quick Check:

   npm imports use "npm:" prefix [OK]

Hint: Remember npm imports start with "npm:" prefix [OK]

Common Mistakes:

• Using URL instead of npm prefix
• Using require() which is Node.js syntax
• Using wrong prefix like deno:

2. Which of the following is the correct syntax to import only the join function from the npm package path in Deno?

easy

A. import { join } from "npm:path";

B. import join from "npm:path/join";

C. import * as join from "npm:path";

D. import join from "path";

Solution

1. Step 1: Understand named imports from npm packages in Deno

   You can import specific functions using curly braces from the package name with npm prefix.

2. Step 2: Match correct syntax

   The correct syntax is import { join } from "npm:path"; to import only the join function.

3. Final Answer:

   import { join } from "npm:path"; -> Option A

4. Quick Check:

   Named imports use curly braces with npm prefix [OK]

Hint: Use curly braces to import specific parts from npm packages [OK]

Common Mistakes:

• Trying to import default when function is named export
• Using wrong path like "npm:path/join"
• Omitting npm prefix

3. What will be the output of this Deno code snippet?

import { v4 } from "npm:uuid";
console.log(typeof v4);

medium

A. "string"

B. "object"

C. "undefined"

D. "function"

Solution

1. Step 1: Understand what v4 from uuid is

   The v4 export from the uuid package is a function that generates UUID strings.

2. Step 2: Check the type of v4

   Using typeof v4 returns "function" because v4 is a function.

3. Final Answer:

   "function" -> Option D

4. Quick Check:

   uuid v4 is a function [OK]

Hint: Remember uuid v4 is a function generating IDs [OK]

Common Mistakes:

• Thinking v4 is a string UUID directly
• Confusing type with object or undefined
• Forgetting to import with npm prefix

4. You wrote this import in Deno:

import express from "npm:express";

But running the code gives an error: SyntaxError: The requested module does not provide an export named 'default'. What is the likely fix?

medium

A. Change import to import * as express from "npm:express";

B. Change import to import express from "express";

C. Add --allow-net flag when running Deno

D. Use require("express") instead

Solution

1. Step 1: Understand the error about missing default export

   The error means express does not have a default export, so import express from ... fails.

2. Step 2: Use namespace import to get all exports

   Using import * as express from "npm:express"; imports all exports as an object, fixing the error.

3. Final Answer:

   Change import to import * as express from "npm:express"; -> Option A

4. Quick Check:

   No default export means use * as import [OK]

Hint: If default export missing, try namespace import * as [OK]

Common Mistakes:

• Removing npm prefix
• Using require() which is not supported in Deno
• Ignoring error and expecting code to run

5. You want to import the lodash package from npm in Deno and use its chunk function to split an array into smaller arrays of size 2. Which code snippet correctly does this?

hard

A. import { chunk } from "npm:lodash";
console.log(chunk([1,2,3,4,5], 2));

B. import _ from "npm:lodash";
console.log(_.chunk([1,2,3,4,5], 2));

C. import chunk from "npm:lodash/chunk";
console.log(chunk([1,2,3,4,5], 2));

D. import { chunk } from "lodash";
console.log(chunk([1,2,3,4,5], 2));

Solution

1. Step 1: Understand lodash exports and npm import in Deno

   Lodash exports a default object with functions like chunk. To use chunk, import the default as _.

2. Step 2: Check import syntax with npm prefix

   Use import _ from "npm:lodash"; to import lodash default export, then call _.chunk(...).

3. Final Answer:

   import _ from "npm:lodash"; console.log(_.chunk([1,2,3,4,5], 2)); -> Option B

4. Quick Check:

   Lodash default import then call chunk method [OK]

Hint: Lodash exports default object; import default and call method [OK]

Common Mistakes:

• Trying named import for chunk which lodash does not export separately
• Omitting npm prefix
• Importing from plain "lodash" without npm prefix