Underscore gives error when bundling with Webpack

Question

I am trying to rewrite old application that uses require.js to use es6 imports. One of the used libraries are Backbone and Underscore. To create one big bundle and precompile es6 to es5, I use Webpack with babel-loader. Bundle gets created but when I load it in browser I am getting following error:

Uncaught TypeError: Cannot read property '_' of undefined

It seems that 'this' in Underscore is undefined in created bundle.js so root._ gives me error.

// Baseline setup
// --------------

// Establish the root object, `window` in the browser, or `global` on   the server.
var root = this;

// Save the previous value of the `_` variable.
var previousUnderscore = root._;

// Establish the object that gets returned to break out of a loop   iteration.
var breaker = {}

Anybody experienced the same issue?

Answer 1

Perhaps, there is another alternative for you by configuration as followed:

{
    "presets": [
        ["es2015", {
            "modules": false
        }]
    ]
}

The reason has been described in detail in the issue: https://github.com/babel/babel/issues/4720

Answer 2

Files processed by babel-loader with the es2015 preset are processed by Babel as ES6 modules. In ES6 modules, this outside of functions is undefined. In your case, you need to add

exclude: /node_modules/,

to your babel-loader config so that it will only process your own code. Currently, you are likely running Babel on all of your node modules too, many of which don't expect to be run through Babel and are not intended to be ES6 modules.