Understand the Differences Between import and require

Understand the Differences Between import and require
0.0 0

#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.


#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.


#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.


#5

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.