These tools belong to different generations.

The require exists only in CommonJS (the way the Node.js created to import and export modules within an application), and the import is ES6, i.e. a new tool that both browser JavaScript and server JavaScript (Node.js) can use.

In addition to this historical difference there are differences in use, where import is more flexible, modern and powerful than require.

It is important however to have in note that some browsers do not yet support ES6, so you may need to compile before using.

Require uses module.exports, which is the "old" (but still valid) syntax to export a module, and which can be anything we want, an object, a string, etc.

import uses both, i.e. you can use module.exports and export, and allows you to export multiple pieces of code more or less like module.export did. One of the advantages of import is that it can only import parts of what was exported:

Examples:

File exporting:

// ficheiro A.js

// sintaxe CommonJS
module.exports = {
    foo: function(){ return 'bar';},
    baz: 123
}

// sintaxe ES6
export function foo(){ return 'bar';}
export const baz = 123;

// ou

function foo(){ return 'bar';}
const baz = 123;

export default {foo, baz};

File that imports:

// ficheiro B.js

// sintaxe CommonJS
const A = require('./A.js');
const foo = A.foo;
const baz = A.baz;

// sintaxe ES6
import * as A from './A.js';
const foo = A.foo;
const baz = A.baz;

// ou somente
import {foo, baz} from './A.js';

When you use export default (ES6 syntax) it implies that you only export one thing per file. If it is an object import can import only pieces, but if it is a function for example then you can use only import foo from './A.js'; without needing {} or * as foo.