Importing from npm packages in Deno - Mini Project: Build & Apply

Importing from npm packages in Deno

📖 Scenario: You are building a simple Deno script that uses a popular npm package to format dates. This is common when you want to add extra features without writing everything yourself.

🎯 Goal: Learn how to import a function from an npm package in Deno and use it to format the current date.

📋 What You'll Learn

Create a variable to hold the current date

Add a configuration variable for the date format string

Import the format function from the date-fns npm package

Use the imported format function to format the current date

Print the formatted date to the console

💡 Why This Matters

🌍 Real World

Developers often use npm packages in Deno to reuse code for common tasks like date formatting, saving time and effort.

💼 Career

Knowing how to import npm packages in Deno is useful for modern JavaScript/TypeScript development and working with Deno-based projects.

1

Create a variable for the current date

Create a variable called now and set it to the current date using new Date().

Deno

// Create a variable called now and set it to new Date()
// Your code here

Hint

Use const now = new Date() to get the current date and time.

2

Add a date format string

Create a variable called dateFormat and set it to the string "yyyy-MM-dd HH:mm:ss" to specify how the date should look.

Deno

const now = new Date()
// Create a variable called dateFormat with value "yyyy-MM-dd HH:mm:ss"
// Your code here

Hint

Use a string to define the date format pattern.

3

Import the format function from date-fns npm package

Import the format function from the npm package date-fns using the URL "npm:date-fns".

Deno

const now = new Date()
const dateFormat = "yyyy-MM-dd HH:mm:ss"
// Import format from "npm:date-fns"
// Your code here

Hint

Use import { format } from "npm:date-fns" to import the function.

4

Format the date and print it

Use the imported format function to format now with dateFormat. Store the result in a variable called formattedDate. Then write console.log(formattedDate) to print it.

Deno

import { format } from "npm:date-fns"

const now = new Date()
const dateFormat = "yyyy-MM-dd HH:mm:ss"
// Format now using format and dateFormat, store in formattedDate
// Print formattedDate using console.log
// Your code here

Hint

Call format(now, dateFormat) and save it. Then print with console.log.

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