Understanding import/export in ES6 with a chain of files

I'm having a bit of a trouble understanding export/import mechanism when I have 3 files, each including the previous one.

Example:

//fileA.js:
export default MyClass

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';


My expectation is that MyClass is then available in fileC, but it looks like it's just not the case. Can you advise?

MyClass

3 Answers
3

In your following code:

//fileA.js:
export default MyClass

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';


Myclass is only going to be available in fileB because this is directly importing this. Your 3th line of code is not going to load in fileA. Just because FileA is loaded in FileB doesn't mean that the dependency gets transferred when we import B in FileC

Myclass

To make it avialable, we have to import it again in file C like we did in file B:

import MyClass from './fileA.js';


import

export

When one file exports multiple things (without the default in front) we can import it in the using named export for example:

export class1

export class2


We are exporting 2 classes, we could import them using the following syntax:

import class1, class2 from './fileA.js';


Keep in mind that the names now have to match the names of the exports, class1 and class2 in this case.

class1

class2

We could also import all of the exports of a file in the following manner:

import * as classes from './fileA.js';

classes.class1 // the way to access class1


This syntax put all exports on an object of which we can determine the name (after the as keyword). We then can access the exports like we normally access properties of an object.

as

Do like below:

//fileA.js:
export default MyClass

//fileB.js:
export default as MyClass from './fileA'

//fileC.js:
import MyClass from './fileB'


Class1, Class2, Class3

When you import a module like this:

//fileC.js:
import './fileB.js';


it doesn't actually import any values. It will execute the global code in that module for side-effects, but does not import the values themselves. In order to do what you want to do, you will need to import module values in every file you want to use them.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.