Understand the Differences Between import and require

JavaScript
1

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require

I don’t understand how I’m supposed to correctly use import in this challenge. What is the correct file path?

Your code so far


"use strict";
import { string_functions } from "string_functions"
capitalizeString("hello!");

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

1 Like
2

Hi,

Before you import something you need to export that. What I mean!

function square(val) { return val * val }

square(4);

export default square;

Now you will import this using import statement

import Square from ‘./square.js’

In case if you are exporting something without using default then you need to import that using
{ annotations}

example:

a.js

export const a = 5;

main.js file

import { a} from ‘./a.js’

This is for your clarification, I hope you have understood the concept and complete the challenge.

Always read the notes and google for keywords

Note
The whitespace surrounding the function inside the curly braces is a best practice - it makes it easier to read the import statement.

Note
The lessons in this section handle non-browser features. import, and the statements we introduce in the rest of these lessons, won’t work on a browser directly. However, we can use various tools to create code out of this to make it work in browser.

Note
In most cases, the file path requires a ./ before it; otherwise, node will look in the node_modules directory first trying to load it as a dependency.

1 Like
3

Hey I forgot about require

The code I have posted above is for ES6 exports and imports.

When you are using node and npm package manager.
You want to use some modules/packages in your files then you will use require.

example:

const path = require(‘path’); // This will import path module.

Read more from here.

4

I think there is a bug in this challenge. I tried it using syntax that I know for xcertain works, it’s the same syntax I’m using with the latest react projects I’ve been doing, and the test does not pass.

the proper path is “./name_of_module” if it is in the same path as the file you’re working on.

1 Like
5

es6-import
es6-import2324×1474 293 KB

If you still unable to solve this, let me know. I will add the solution.

6

I got it to pass, but the final “note” in the instructions did not pass, even though it should. I 'm going to call this a bug and submit it.

Update: issue submitted: https://github.com/freeCodeCamp/freeCodeCamp/issues/17436

7

You can see in the above screenshot, no bugs or yelling in the test cases.

8

It seems to prefer “” over ‘’ for the file path, and while “./…” is not necessary here, if we did this in a project with node_modules, we have a problem. I’m also unsure if “valid import statement” is a good phrase to use for the tests since
import { radio } from "./yipyip";
is a valid import statement. It might not be what FCC wants us to use in this one situation; however, it is hardly an invalid way of importing.
This is less about a bug in FCC’s code and more about a problem in how the lesson is written and explained.

2 Likes
9

Using double quotes passes the FCC challenge.

2 Likes
10

Question Answer

Reveal 
"use strict";
import {capitalizeString} from "string_functions"
capitalizeString("hello!");
11

I had to use double quotes AND remove “./” from the path in order to pass this challenge. Thanks for your comments.

It seems to me that single quotes should be valid syntax. Also, it seems that “./” should be used at the beginning of the path, since the file is supposed to be in the same directory. Using just the module name without a prefix should be used for modules which reside in “node_modules”.

1 Like
12

The challenge states:

Add the appropriate import statement that will allow the current file to use the capitalizeString function. The file where this function lives is called "string_functions" , and it is in the same directory as the current file.

I am unaware of circumstances in which omitting ./ is allowed when importing from a file in the same directory.

In every situation I have seen, if that file is in the same directory the import must be './string_functions' using either single or double quotes, and the file extension may or may not be required. A relative or absolute path is required, the only exception I’ve seen is the node_modules folder, which this challenge is explicitly not using.

I am open to being corrected, but the passing solution appears flatly wrong.