Problems with underscore.js

[filips123]

Issue

I have code that uses web3. It should work in Node.js and browser so I use AEgir to build it for the browser (with Webpack).

It works normally in Node.js but there are problems in the browser.

When I include my built JS file, I get the error TypeError: root is undefined and none of my code works.

That error comes from underscore.js:

(function() {

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

  // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this; // <= !!! this is undefined !!!

  // Save the previous value of the `_` variable.
  var previousUnderscore = root._; // <==  !!! here is error !!!

  // Save bytes in the minified (but not gzipped) version:
  var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;

The issue was already reported to jashkenas/underscore#2680, but they said that this is not a problem with underscore.js:

If you're transpiring with babel, or using "use strict", the value of this will always be set to undefined, which is why root is undefined. You need to do this differently. This is not a problem with the underscore.

I don't know if this is an issue with Web3 or AEgir, so I first opened an issue here. Please let me know if this is an issue with AEgir so I will open an issue there.

Steps to reproduce

1. Create project and install web3 and aegir.

2. Create file src/index.js which uses web3:

'use strict'
const Web3 = require('web3')

3. Build with aegir build.

4. Create HTML file and include built script index.js.

5. Open HTML file in browser and open developer console. You will see error.

Logs

Firefox:

TypeError: root is undefined[Več o tem] underscore.js:15
    Underscore 2
        <anonimno>
        <anonimno>
    Webpack 18
        __webpack_require__
        <anonimno>
        __webpack_require__
        <anonimno>
        __webpack_require__
        <anonimno>
        __webpack_require__
        <anonimno>
        <anonimno>
        __webpack_require__
        <anonimno>
        __webpack_require__
        <anonimno>
        __webpack_require__
        <anonimno>
        <anonimno>
        webpackUniversalModuleDefinition
        <anonimno>

Chrome:

Uncaught TypeError: Cannot read property '_' of undefined
    at underscore.js:15
    at Object.<anonymous> (underscore.js:1691)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (index.js:27)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (index.js:25)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (index.js:32)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (client.js:6)

Environment

• Browser: Firefox and Chrome
• Web3: beta 37
• AEgir: 18.0.3

[nivida]

Since beta.38 does Web3.js use lodash and not underscore. Please upgrade to the latest version and it will solve your problem.

[filips123]

@nivida This is not possible because of problems with truffle-contract (see trufflesuite/truffle#1667). And I think that this worked in previous AEgir versions, so this is probably problem with it?