1

I have this folder structure:

Parent /
  Child-A /
    src /
      modules /
        Module-A.js
        Module-B.js
        Module-C.js
        Module-D.js
      Main-A.js 
  Child-B /
    src /
      Main-B.js

I want to import ModuleA.js in MainB.js. Please note that ModuleA.js has no exports, if that even means something (I'm new to ES6). It looks something like this:

import { showNotification } from './Notification';

$( document ).on( 'click', '[data-action="load-more"]', ajaxCall ); 

function ajaxCall() {
    ...
}

function addNewPosts() {
    ... 
}

function notifyError() {
    ...
}

I tried importing the module adding this line of code in Main-B.js:

import '../../Child-A/src/modules/Module-A.js'

But for some reason this imports the whole Main-A.js, not just Module-A.js

Any ideas?

+++ UPDATE +++

To elaborate a bit more, here's the Main-A.js code, which imports all the modules in the Child-A project:

// Stylesheets

import './style.scss';

// Libraries

import 'salvattore'; 
import 'jquery-lazy';

// Custom Scripts

import './modules/Module-A'; 
import './modules/Module-B';
import './modules/Module-C'; 
import './modules/Module-D'; 

And here's the Main-B.js file from the Child-B project:

// Stylesheets

import './style.scss';

// Libraries

import 'salvattore'; 

// Custom Scripts

import '../../Child-A/src/modules/Module-A.js';

Like I said, in this Main-B.js file I only want to import Module-A; but doing it as I did results in all the modules from the Child-A project to be imported, which I know because the functions in the other modules are working in the Child-B project as well, even though I'm not explicitly importing them, and I can't understand why they're working.

I am using a module bundler (Webpack) for each project.

grazdev
  • 1,082
  • 2
  • 15
  • 37
  • "*But for some reason this imports the whole Main-A.js, not just Module-A.js*" - what do you mean? How do you know it is importing that file - does its code run? Do you use a module bundler and see it in the output? What is "*the whole Main-A.js*" - what "parts" of it had you expected? Can you post the contents of the files `Main-A.js` and `Notification`? – Bergi Oct 31 '17 at 08:29
  • @Bergi I've updated my answer, thank you for looking. – grazdev Oct 31 '17 at 08:51
  • "*the functions in the other modules are working in the Child-B project as well, even though I'm not explicitly importing them*" - that's really weird, if you are not importing them they should definitely not be in scope. Can you post the output of the bundler as well? – Bergi Oct 31 '17 at 09:02
  • 1
    Are there any circular dependencies among the Child-A modules? That's why I've asked for the contents of `./Notification` - it and all its dependencies are of course required as well when you import `Module-A.js`. – Bergi Oct 31 '17 at 09:04
  • @Bergi You're right! I was making imports in-between the different modules, which explains why they were all being imported even though I called just one. Thank you for alerting me to that. – grazdev Oct 31 '17 at 09:14
  • @Bergi By the way, what's the best way to cache a DOM element and use it across modules without importing it as a constant? My problem was that I was doing something like `export const Body = $( 'body' );` in one module and importing it with `import { Body } from './Globals';` in another... – grazdev Oct 31 '17 at 09:22
  • I don't see what's wrong with that - if it's *really* a global, and `Globals.js` doesn't grow too big. The alternative is dependency injection (usually with a function that "instantiates" the module singleton, taking dependencies like the shared `Body` as a parameter). – Bergi Oct 31 '17 at 09:32
  • @Bergi Okay, thank you again for your help! – grazdev Oct 31 '17 at 09:37
  • 1
    Possible duplicate of [ES6 import equivalent of require() without exports](https://stackoverflow.com/questions/41179828/es6-import-equivalent-of-require-without-exports) – Malekai May 18 '19 at 06:51
  • 1
    Please read [this answer](https://stackoverflow.com/a/41179861/10415695) on [this question](https://stackoverflow.com/q/41179828/10415695). – Malekai May 18 '19 at 06:51

0 Answers0