undefined is not a constructor (evaluating 'Object.assign')

[andypike]

Firstly sorry if this is a stupid question, but I'm new to this new js world. We used to just add script tags and everything was fine 😂 . Also, this maybe nothing to do with babel-brunch, but it seems like the right place to start asking questions.

Anyway, I have a project that uses babel-brunch. It include a few npm modules and in the latest Chrome browser everything is working fine. However, when I run my tests using PhantomJS, I get the following error:

** (Wallaby.JSError) There was an uncaught javascript error:

     TypeError: undefined is not a constructor (evaluating 'Object.assign')
       (anonymous function) (http://localhost:4001/js/app.js:12404)
       __webpack_require__ (http://localhost:4001/js/app.js:11448)
       (anonymous function) (http://localhost:4001/js/app.js:20395)
       __webpack_require__ (http://localhost:4001/js/app.js:11448)
       (anonymous function) (http://localhost:4001/js/app.js:11494)
       (anonymous function) (http://localhost:4001/js/app.js:11495)
       webpackUniversalModuleDefinition (http://localhost:4001/js/app.js:11421)
       (anonymous function) (http://localhost:4001/js/app.js:11428)
       (anonymous function) (http://localhost:4001/js/app.js:20429)
       initModule (http://localhost:4001/js/app.js:42)
       require (http://localhost:4001/js/app.js:59)
       expanded (http://localhost:4001/js/app.js:34)
       (anonymous function) (http://localhost:4001/js/app.js:20436)
       initModule (http://localhost:4001/js/app.js:42)
       require (http://localhost:4001/js/app.js:59)

Looking at app.js:12404 it's this line:

/* harmony default export */ exports["a"] = Object.assign({},

And this comes from the npm package vuetify (https://www.npmjs.com/package/vuetify).

From my understanding, Object.assign is a new ES6 thingy and PhantomJS (and other browsers) do not support that yet, hence the error. So I assume I need a polyfill for this to work in browsers that only support ES5.

Looking at your readme and some of the issues, I think this should already be included in babel-brunch so I'm not sure why it isn't working.

For completeness my brunch config is below but is pretty slim and almost the default generated by Elixir Phoenix 1.3:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/]
    },
    vue: {
      extractCSS: true
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "vue"],
    globals: {
      Vue: "vue/dist/vue.common.js"
    },
    styles: {
      vuetify: ["dist/vuetify.min.css"]
    }
  }
};

I'm obviously missing something, but not sure if it's a config thing or a missing package or what not.

Any help or advice would be greatly appriciated!

Thanks in advance!

Andy

❤️

[andypike]

As a follow up, I've tried adding babel-preset-env with:

npm install babel-preset-env --save-dev

Then updating my babel config as follows:

babel: {
  ignore: [/vendor/],
  presets: [
    ["env", {
      useBuiltIns: true,
      debug: true
    }]
  ]
}

With debug enabled, I can see the Object.assign polyfill is being used when building with brunch build:

Using polyfills:
  es6.typed.array-buffer {}
  es6.typed.data-view {}
  es6.typed.int8-array {}
  // ... snip ...
  es6.symbol {}
  es6.object.assign {}
  es6.object.is {}

As far as I can see, this should do it but running up the tests in PhantomJS still reports the same error as above.

For completeness, this is my package.json file:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-brunch": "6.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "brunch": "2.10.7",
    "clean-css-brunch": "2.10.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb-base": "^11.2.0",
    "eslint-plugin-import": "^2.3.0",
    "uglify-js-brunch": "2.1.1",
    "vue-brunch": "^2.0.1",
    "vuetify": "^0.12.7"
  }
}

[andypike]

OK, I think I fixed it now. I added the following to my app.js file:

import "babel-polyfill";

And it all seems to work without any errors. As I'm not sure if this is the correct way to do this, I'll leave this issue open. If there is a better way, the please let me know.

Thanks

[shvaikalesh]

Hey @andypike.

import "babel-polyfill";

Installs all available polyfills for dev and prod environments. I would recommend adding uglify as target for dev mode. See https://github.com/babel/babel-preset-env/pull/178

Also, phantomjs is unmaintained (thats why we don't have phantomjs target in babel-preset-env). Using headless chrome seems like a good upgrade.

[andrastothtw]

@andypike Thanks for this line:

From my understanding, Object.assign is a new ES6 thingy and PhantomJS (and other browsers) do not support that yet, hence the error.

I had a similar problem, while test failed in PhantomJS, debugging in Chrome did not. Saved a lot of headache!

[GCinellu]

@andypike your solution solved my issue, thanks!