4

I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues

For example, I have a component that use the reflux .connect() mixin :

import MyStore from '../stores/my-store';

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

When I import all modules individually in each file like this, everything's fine.

I then tried to improve my code by using deconstructed import statements :

...in a component :

//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead

...and in js/index.js :

import One from './one';
import Two from './two';
import Three from './three';

export { One, Two, Three };

App source code files are more concise using the above technique, because I can import all components in one import line.

But when I use this, some dependencies end up beeing undefined when I use them

If I use the same updated example...

//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

...MyStore parameter ends up undefined in Reflux.connect method.

I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.

Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong

Venkat.R
  • 7,420
  • 5
  • 42
  • 63
Pandaiolo
  • 11,165
  • 5
  • 38
  • 70
  • Are you introducing circular dependencies with this technique? – Bergi Nov 26 '15 at 11:09
  • I don't know, I guess there are already circular dependencies in my app, but they are not a problem *per se*, it's well managed by es6 loader. This is the fact of having bundled all stores, all components, etc, in index.js files that re-exports them, that causes the issue. I am not able to see why or how, hence my question. – Pandaiolo Nov 26 '15 at 11:41
  • To be clear : I don't know how to easily analyse/visualise my app module dependencies :) – Pandaiolo Nov 26 '15 at 11:43
  • 1
    @Pandaiolo [Analyse tool](https://webpack.github.io/analyse/) can do that. You need to do something like `webpack --profile --json > stats.json` to get the file the tool expects. – Juho Vepsäläinen Nov 26 '15 at 15:45
  • @bebraw thanks, great tool! But even excluding babel polyfills, I have like 600 modules in my bundle, so the visualization screen is slow and useless. Any way to specifically spot circular or problematic dependencies ? – Pandaiolo Nov 26 '15 at 16:41
  • @Pandaiolo I'm not sure if there's anything specific for that. I would probably start by eliminating files from the project to pinpoint the culprit. You could also try setting up a `stores` [resolve.alias](https://webpack.github.io/docs/configuration.html#resolve-alias). Maybe that would help. – Juho Vepsäläinen Nov 26 '15 at 17:41

2 Answers2

2

In order to get extended info about build, run: 

webpack --profile --display-modules --display-reasons

It will give you bunch of information for optimisation/profiling.

Oleksii
  • 233
  • 2
  • 6
  • 1
    Thanks, I would add the `--json` switch proposed by @bebraw which is really useful, however, for a large scale app, while it gives more insight on the bundle, it does not identify runtime dependencies issues – Pandaiolo Feb 04 '16 at 09:58
0

import statement is used to import functions, objects or primitives that have been exported from an external module.

As per MDN doc, you can import the Modules not the directory.

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html

As a workaround keep one file as base.js and include all your 3 files.

Venkat.R
  • 7,420
  • 5
  • 42
  • 63
  • I loaded Chrome Canary and this repo, but I realized it does not use `import` statements, instead every file is loaded with ` – Pandaiolo Dec 02 '15 at 09:59
  • @Pandaiolo, Your current issue is exist in import { One, Two, Three } from '../js'; right ! – Venkat.R Dec 31 '15 at 04:34
  • @Pandaiolo, updated new answer. please take a look at it. – Venkat.R Dec 31 '15 at 05:06