ES6 - Convert from 'require' to 'import'

Question

If the alternative to:

var Foo = require('foo');

is:

import Foo from 'foo';

What is the alternative to:

var Bar = require('foo').batz

Could it be:

import {batz}  from 'foo' ?

Also, this has nothing to do with ReactJS. Could you change your tag from reactjs to ecmascript-6? — Crob, Jun 17 '15 at 17:49
And what about `require('foo');` without storing it in a var? `import` seems to need a variable, can I just use anything random? — Kokodoko, Jan 25 '18 at 10:53
@Kokodoko a little late, but `import './file';` would be the equivalent! — Emile Bergeron, May 06 '20 at 02:42
Can someone explain with PERMUTATIONS of all filenames what is going on with the first version? I do not think it works in general. The NAMES are critical surely? — mathtick, Dec 30 '20 at 15:01

score 61 · Accepted Answer · answered Jun 17 '15 at 18:32

61

Nearly. It does however depend on how you are exporting them.

named exports (export var batz = …):
```
import {batz as Bar} from 'foo';
```
default-exported object (export default {batz: …};) - should not be used:
```
import Foo from 'foo';
var Bar = Foo.batz;
```

answered Jun 17 '15 at 18:32

Bergi

2

"default-exported object [...] should not be used" – could you explain why not? – Pavlo Jun 17 '15 at 20:14
2

@Pavlo: Because, as you can see, the import sytax is awkward :-) At least in this case named exports are much more appropriate (I'm not *generally* advising against default exports). – Bergi Jun 17 '15 at 20:16
```import { foo: { batz } } from 'foo'; console.log(batz);``` – Zoltan Nov 25 '15 at 07:23
2

@szines: Nope, you can only [bind to `BindingIdentifier`s](http://www.ecma-international.org/ecma-262/6.0/#sec-imports), you cannot use destructuring here. – Bergi Nov 25 '15 at 07:29
@Bergi Ah thanks. However in Ember.js you can do that what I wrote, probably it is a frameworks specific thing. – Zoltan Nov 25 '15 at 09:17
@szines: Or a transpiler extension. Maybe there's an ES7 proposal for it that I don't know of. – Bergi Nov 25 '15 at 09:18
what about `var Bar = require('foo').batz()` ? – DragonKnight Jul 06 '23 at 01:34
1

@DragonKnight see the related [Pass options to ES6 module imports](https://stackoverflow.com/q/29923879/1048572). You need to split that into the import declaration and the statement that actually calls the initialisation function. Typically `import { batz } from 'foo'; const Bar = batz();` – Bergi Jul 06 '23 at 13:13

1 Answers1