How to use import in JS files?

Question

I got a js file from another developer in which the developer uses import and not require. It looks like

import { Selector, Role, ClientFunction } from 'testcafe';
import inputStore from '../config/input-store';
import axios from "axios";
import fs from "fs";
import path from "path";

I want now add another module to this js file, but I have no idea how I can use the import The module I want to use is https://github.com/Olegas/dom-compare

Its docs said:

var compare = require('dom-compare').compare,

What is its import syntax?

@HereticMonkey That answer was from 2015 - a lot has changed since then — slebetman, Feb 04 '20 at 17:30
Are you using this in pure node.js or are you using a bundler/transplier such as Typescript or webpack etc? — slebetman, Feb 04 '20 at 17:32
@slebetman There are answers on that question from much later; the age of the question is immaterial. — Heretic Monkey, Feb 04 '20 at 18:09
@HereticMonkey Unfortunately all the answers on that question are wrong with regards to how modules work in current version of node.js. There are **no correct answers** in that question (yes, it took me a couple of minutes to read all the answers) — slebetman, Feb 05 '20 at 01:16
@slebetmen You seem adept at doing everything except answering a question. If a question has no correct answers, answer it correctly, or mark it as a duplicate of a question that does. — Heretic Monkey, Feb 05 '20 at 01:52

score 2 · Accepted Answer · answered Feb 04 '20 at 17:19

require is part of the CommonJS module syntax.

import and export are part of the standard ES6 module format which is supported in recent versions of Node.js (but only if explicitly enabled) and in module web browsers when initialized from a <script type="module">

Note that your example also uses destructuring syntax to read the value of properties of the imported object without having the store the object itself in an intermediary variable.

The equivalent of

var compare = require('dom-compare').compare,

… in ES6 with ES6 modules and destructuring would be:

import { compare } from "dom-compare";

Actually, `var { compare } = require('dom-compare')` is also valid — slebetman, Feb 04 '20 at 17:29

Sara Helba · Answer 2 · 2020-02-04T19:23:55.633

tldr:

import {compare} from 'dom-compare';

Explanation:

In these import statements, the word directly to the right of the import keyword is the variable name you can use to access the imported module. So for example, in this instance, the most direct translation from var compare = require('dom-compare').compare to an import statement would be:

import dom-compare from 'dom-compare';
var compare = dom-compare.compare;

Then you have access to an object named dom-compare in a variable of the same name and access to a property of the dom-compare object in a variable of its same name. You could call either of these variables something else if you'd like:

import myComparisonModule from 'dom-compare';
var theComparingProperty = myComparisonModule.compare;

But in order to grab a particular property off of an object, you can also use the shorthand from es6 that does the same thing, but sets the variable name to whatever the property name was:

import dom-compare from 'dom-compare';
var {compare} = dom-compare;

In this syntax, you still have access to two variables (dom-compare and compare). The only difference is that you could've still named the dom-compare variable anything you liked, but the name of the variable that you're setting to the property you got off the dom-compare object is set to whatever it was originally called when it was a property of the object (in this case compare).

But you can also do this on just one line if you don't need anything else from the dom-compare module except for the compare property, and that's how we get:

import {compare} from 'dom-compare';

In this case we don't have a variable to access the dom-compare module, just a variable to access the compare property from the dom-compare module. And it's named after itself.

You can also grab multiple properties off of an object in one line. For example, in the statement import { Selector, Role, ClientFunction } from 'testcafe'; that you referenced, the other developer was pulling multiple properties out of the testcafe object to use as variables of the same names, a shorthand for:

import testcafeModule from 'testcafe';
var Selector = testcafeModule.Selector;
var Role = testcafeModule.Role;
var ClientFunction = testcafeModule.ClientFunction;

Please note that this will **only** work if `dom-compare` supports both commonjs and ESM formats. I took a quick look at its github and it doesn't look like it supports ESM. In which case this won't work. You **must** use `require` — slebetman, Feb 04 '20 at 17:43

How to use import in JS files?

2 Answers2