Importing from npm packages in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the lodash package from npm.

Deno

import _ from '[1]';

Drag options to blanks, or click blank then click option'

Anpm:lodash

Blodash

Chttps://lodash.com

Dnpm_lodash

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the 'npm:' prefix causes import errors.

Using the package name without prefix won't work in Deno.

In Deno, to import an npm package, you prefix the package name with npm:.

2fill in blank

medium

Complete the code to import the 'join' function from the 'path' npm package.

Deno

import { join } from '[1]';

Drag options to blanks, or click blank then click option'

Anpm:path_join

Bpath

Chttps://deno.land/std/path

Dnpm:path

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'path' without 'npm:' prefix.

Using the URL for Deno standard library instead of npm package.

Use npm:path to import the 'path' package from npm in Deno.

3fill in blank

hard

Fix the error in the import statement to correctly import 'express' from npm.

Deno

import express from '[1]';

Drag options to blanks, or click blank then click option'

Anpm:express

Bhttps://expressjs.com

Cexpress

Dnpm_express

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the 'npm:' prefix causes module not found errors.

Using URLs or incorrect package names.

To import 'express' from npm in Deno, use the 'npm:' prefix before the package name.

4fill in blank

hard

Fill both blanks to import the 'readFileSync' and 'writeFileSync' functions from the 'fs' npm package.

Deno

import { [1], [2] } from '[3]';

Drag options to blanks, or click blank then click option'

AreadFileSync

BwriteFileSync

Cnpm:fs

Dfs

Attempts:

3 left

💡 Hint

Common Mistakes

Not using curly braces for named imports.

Forgetting the 'npm:' prefix in the package name.

Use curly braces to import specific functions and prefix the package name with 'npm:'.

5fill in blank

hard

Fill all three blanks to import the default export as 'React' and named exports 'useState' and 'useEffect' from the 'react' npm package.

Deno

import React, { [1], [2] } from '[3]';

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

Cnpm:react

Dreact

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping default and named imports.

Missing 'npm:' prefix in the package name.

Default import comes first, then named imports in curly braces, and the package name prefixed with 'npm:'.

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