No UI tree using webpack and ES2015 import

[berniezhao]

When using inspector with webpack project and ES2015 "import" statement, the agent failed to patch the application.

import Backbone from 'backbone';
import Marionette from 'backbone.marionette';

if (window.__agent) {
    window.__agent.start(Backbone, Marionette);
}

import Router from './router';
import Layout from './layout';
...

Reason being, unlike require() ES2015 import is a static import, webpack will put them in front of any line of code inside the module. Therefore the agent starts too late and failed to patch App.

Webpack compiles the above code into:

var _backbone = __webpack_require__(77);
var _backbone3 = __webpack_require__(80);
var _router = __webpack_require__(115);
var _layout = __webpack_require__(136);
...
...

// to make Marionette Chrome inspector work
if (window.__agent) {
    window.__agent.start(_backbone2.default, _backbone4.default);
}
...

[paulfalgout]

so if you make a module all by itself that includes Bb, Mn and the agent stuff that is the first thing imported, I assume it would work?
Like

// agent-shim.js
import Backbone from 'backbone';
import Marionette from 'backbone.marionette';

if (window.__agent) {
    window.__agent.start(Backbone, Marionette);
}

import './agent-shim';
import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import Router from './router';
import Layout from './layout';
...

ninja-edited a code mistake

[berniezhao]

@paulfalgout Yup, this should work. I haven't tested but will try it later.
It would be cool to include this in Caveats section of readme.

[ladytellur]

@paulfalgout suggestion prevents crashing but Inspector isn't showing any data in my similar case