Nuxt.js: Browser Compatibility

Created on 30 Dec 2016  路  17Comments  路  Source: nuxt/nuxt.js

Nuxt.js errors on IE10 and IE11 with Object doesn't support property or method assign
See here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Browser_compatibility

Perhaps some official browser compatibilities could be documented, and some polyfills could be implemented to allow realistic production use of Nuxt.js

Cheers!

This bug report is available on Nuxt.js community (#c73)
bug-confirmed

Most helpful comment

Just in case someone else struggles with it, so far I could solve it by:
1.) adding 'babel-polyfill' to vendors in nuxt.config.js
2.) setting useBuiltins to true to avoid double polyfillings -> change/add babel in nuxt.config.js "build":

babel: {
        presets: [
            ['vue-app', {
                useBuiltIns: true,
                targets: { ie: 9, uglify: true }
                }
            ]
        ]
    },

All 17 comments

Hi!

It's weird since the es6-object-assign is included in the vendor bundle.

I will take a deeper look and test it, thank you for spotting it :)

Did some testing in IE11 a few minutes ago to try replicating this issue.

Setup: Fresh nuxt/starter vue-cli template, with a modified homepage data method which uses async & Object.assign.

import axios from 'axios'

export default {
  async data() {
    let res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return {
      posts: res.data,
      coolObject: Object.assign({}, {prop: 1})
    }
  }
}

Dev Mode
Started with npm run dev.

For some reason the first page load gave me a console error, but after clearing cache and retrying several times I can't replicate it. There's no way for the bundles to execute out of order, correct?

The only consistent warning in the console is webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser, but that's no big deal since developing in IE would be painful anyway.

Production Mode
Ran npm run build then npm start.
Opened in IE11 & saw no errors. Navigation back & forth between the pages is perfectly normal.

TL\;DR
IE11 seems fine with the included polyfills on my computer.

Thank you for your testing on IE 11 @SkaterDad

@jaredreich it should be fixed with this commit: https://github.com/nuxt/nuxt.js/commit/0b58637a09e35ca6ce350fe9182b5d468d9d8626 (not released yet)

@jaredreich you can upgrade to the 0.9.6 it should work :)

@Atinux I have this problem with the most recent version of nuxt in internet explorer.
Can we reopen this?
It's just a fresh vue/starter template with yarn dev

@John0x can you show the console error so we can try to work on it

@Atinux it's the same as above ("Object doesn't support property or method assign").
I'll post a stacktrace later.

same problem in android browser.

"Uncaught TypeError: Object function Object() { [native code] } has no method 'assign'"

Nuxt version 1.0.0-rc8

@wan2land it appears es6-object-assign is no longer included. I just experienced this issue and I sovled it by manually adding in es6-object-assign to my vendors.

@wan2land sorry, my solution above actually did not work.

@Atinux what is the best way to load a polyfill into nuxt? Adding in es6-object-assign into vendors does nothing.

I'm loading from a cdn in my head script area to resolve this for now but would love to avoid this.

Hi @uptownhr

I keep it as bug and will work on it after other priorities, if someone knows what to do it would be a great help.

I'm also having this exact issue. 馃槩

I found this commit ac9412b908b3dfca699aa22c42f, actually next after 0b58637a09e3. Looks like it's the reason of IE incompatibilities. @Atinux, any ideas? Why did you do it and how can we fix it?

Just in case someone else struggles with it, so far I could solve it by:
1.) adding 'babel-polyfill' to vendors in nuxt.config.js
2.) setting useBuiltins to true to avoid double polyfillings -> change/add babel in nuxt.config.js "build":

babel: {
        presets: [
            ['vue-app', {
                useBuiltIns: true,
                targets: { ie: 9, uglify: true }
                }
            ]
        ]
    },

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pehbehbeh picture pehbehbeh  路  3Comments

nassimbenkirane picture nassimbenkirane  路  3Comments

bimohxh picture bimohxh  路  3Comments

bimohxh picture bimohxh  路  3Comments

maicong picture maicong  路  3Comments