minify: [BUG] Cannot read property 'add' of undefined

Here’s my .babelrc:

babelrc
{
  "presets": [
    "es2015", "stage-2", "stage-0", "react", "es2015-ie"
  ],
  "plugins": [
    "transform-runtime", "transform-decorators-legacy", "transform-class-properties"
  ],
  "compact": true,
  "env": {
    "test": {
      "plugins": ["istanbul"]
    },
    "production": {
      "presets": [
         "babili"
      ]
    }
  }
}

Running babel resulted in this error:

ERROR in ./src/components/Main/index.js
Module build failed: TypeError: /src/components/Main/index.js: Cannot read property 'add' of undefined
    at ScopeTracker.addReference (/node_modules/babel-plugin-minify-mangle-names/lib/scope-tracker.js:55:36)
    at ReferencedIdentifier (/node_modules/babel-plugin-minify-mangle-names/lib/index.js:190:28)
    at newFn (/node_modules/babel-traverse/lib/visitors.js:318:17)
    at bfsTraverse (/node_modules/babel-plugin-minify-mangle-names/lib/bfs-traverse.js:34:43)
    at Mangler.collect (/node_modules/babel-plugin-minify-mangle-names/lib/index.js:269:9)
    at Mangler.run (/node_modules/babel-plugin-minify-mangle-names/lib/index.js:70:14)
    at PluginPass.exit (/node_modules/babel-plugin-minify-mangle-names/lib/index.js:589:19)
    at newFn (/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/node_modules/babel-traverse/lib/index.js:114:17)
    at traverse (/node_modules/babel-traverse/lib/index.js:79:12)
    at File.transform (/node_modules/babel-core/lib/transformation/file/index.js:548:35)
    at /node_modules/babel-core/lib/transformation/pipeline.js:50:19
    at File.wrap (/node_modules/babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transpile (/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (/node_modules/babel-loader/lib/index.js:163:20)
 @ ./src/dist.js 1:127-153

Now if I disable Mangling, the minification doesn’t seem to have much effect:

npm run dist

> BABEL_ENV=production webpack --env=dist

Hash: b6d52d6cc9478801536d
Version: webpack 1.15.0
Time: 4355ms
               Asset    Size  Chunks             Chunk Names
    dist.js  749 kB       0  [emitted]  main
dist.js.map  923 kB       0  [emitted]  main
    + 340 hidden modules

Dist without production env:

> webpack --env=dist

Hash: 8636992c125a9a4e5f8a
Version: webpack 1.15.0
Time: 3934ms
               Asset    Size  Chunks             Chunk Names
    dist.js  752 kB       0  [emitted]  main
    dist.js.map  925 kB       0  [emitted]  main
    + 340 hidden modules

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 51
  • Comments: 54 (5 by maintainers)

Commits related to this issue

Most upvoted comments

After upgrading babel to latest version I am still experiencing this issue

For me works with this configuration only:

{
...
  "env": {
    "production": {
      "presets": [
      ...
        [
          "minify",
          {
            "mangle": false,
            "evaluate": false
          }
        ]
      ]
    }  
  },
...
}

I am also experiencing this issue. My .babelrc

{
  "plugins": ["transform-runtime", "lodash", "transform-decorators-legacy"],
  "presets": ["es2015", "react", "stage-0", "babili"]
}

I can resolve it by turning mangle off:

{
  "plugins": [
    "transform-runtime",
    "lodash",
    "transform-decorators-legacy"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-0",
    [
      "babili",
      {
        "evaluate": false,
        "mangle": false
      }
    ]
  ]
}

In my case the same error occurred due to some function’s parameter default value set to a constant.

const VALUE = 10;

function myFunction(param = VALUE) {...}

The workaround was to replace the constant in the function declaration, like this:

function myFunction(param = 10) {...}

or

function myFunction(param) {
  if ("undefined" === typeof param) {
      param = VALUE;
  }
}

Thanks, setting mangle to false works for me, too. But I need name mangling, for size reduction as well as for code obfuscation. Perhaps it’s possible to use a separate name mangler plugin somehow?

So many reports, the issue is marked as closed and there is no solution?

This is getting so annoying. I now did some slight code changes, and the same problem pops up in a completely different file. Wondering why this has been marked as closed? IMHO, it’s not an acceptable solution to update to a beta version of Babel which might introduce additional errors.

It’s still an issue. (rollup-babel-minify)

I am also having this problem when mangle is set to true. Is setting it to false the only solution?

Having this problem too.

I am also affected with preset “env”. Any progress on this ? I have tried babel/babel 7.0.0-alpha.19 with babel/babel#6054 merged but now got a

Cannot read property 'bindings' of null

@devongovett This error is occurring again, on updating to babel core 7.8.0

I agree with @derwaldgeist Is there any better solution?

Currently experiencing this issue with the following .babelrc

{
  "presets": [
    "env",
    "minify"
  ],
  "plugins": [
    "transform-runtime"
  ]
}
TypeError: file.js: Cannot read property 'add' of undefined

This issue is closed but the errors are still present, a workaround was found but I don’t think it’s optimal.

I’m upgrading babel from 7.7.4 to 7.8.3 today and this happened to me too, after changing the configuration for minify from {mangle: true} to {mangle: false} I was able to build without problem; the name mangling is the issue for me too 😕

Following @Architektor’s recommendation, I fixed the problem in my situation by setting mangle: false. Using mangle and babel-preset-env always throws Cannot read property 'bindings' of null. I may have to use the uglify beta for the time being.

@alexcheninfo Thanks for pointing me to UglifyJSPlugin Beta. @boopathi Yes, it was already mentioned that there’s a fix coming in Babel 7. But upgrading to a major version which is still in beta is not really an option for me right now. I would have hoped this could be fixed in minify directly. But maybe I just don’t see the level of complexity involved in the fix.

This may not work with everyone and in every situation. I’m glad you found a solution, but I am not using ES6 classes, so it appears this bug is caused by multiple unhandled ES6 niches.

I was able to track down the problem to method calls on the name of an imported module, if they occurred inside (the constructor of) a class.

Example:

import express from 'express';
const app = express();
class MyRestServer {
  constructor() {
    app.use(express.static(path.join(__dirname, 'public')));
  }
}

If I move the call outside the class constructor, it works:

import express from 'express';
const app = express();
const staticAssets = express.static(path.join(__dirname, 'public'));
class MyRestServer {
  constructor() {
    app.use(staticAssets);
  }
}

@boopathi

My .babelrc is:

{
  "presets": [
    "stage-0",
    ["env", {
      "targets": {
        "node": "7.4.0",
        "electron": "1.6.7"
      },
      "useBuiltIns": true
    }]
  ],
  "plugins": [
    "add-module-exports",
    "transform-decorators-legacy"
  ],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  }
}

When I removed preset-env, it worked. But below config with transform-es2015-block-scoping also worked:

{
  "presets": [
    "stage-0"
  ],
  "plugins": [
    "transform-es2015-block-scoping",
    "add-module-exports",
    "transform-decorators-legacy"
  ],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  }
}

Encountered this today. @eugenmihailescu’s workaround worked for me.

My scenario: I’m using TypeScript and an enum value as the default value for a function parameter.

Did a bit of testing and found out it’s not necessarily due to a constant but rather, as long as it’s coming from a variable, it’ll fail to transform.

Same problem here, noticed that with this .babelrc it fails:

{
    "presets": [
        ["env", { "targets": { "node": "current" } }],
        "stage-3",
        "minify"
    ]
}

But removing minify it works

Having this problem too.

Yes, you’re right.

I meant: ‘I was able to track down the problem in my case…’

It is also worth mentioning that the very same code worked perfectly before I refactored other code. So I guess it’s related to duplicate entries in the AST tree, as suggested above.

I think I figured out the issue – it seems like it’s actually a problem with babel-plugin-transform-es2015-modules-commonjs. Working on a PR to babel/babel now.

I’m looking into fixing this. I’ve narrowed it down to a very small reproducible example:

import Foo from 'bar';
class Baz extends Foo {}
(function() { Foo }), Baz;
{
  "plugins": ["transform-es2015-modules-commonjs", "minify-mangle-names"]
}

The issue doesn’t seem to occur if the order of the plugins is flipped, or if one plugin is run on the output of the other. The two plugins might be conflicting with each other somehow.

So I have a repro repo: https://github.com/arichiardi/js.spec/tree/webpack-babili 😄

Just run yarn and yarn run build