How Do I Fix ‘An Error Occurred’ in Nuxt.js with IE11?

When I first ran my Nuxt.js project in IE11, I was greeted with a big ugly “An error occurred” message. Everything worked perfectly in Chrome and Firefox, but IE11 just refused to cooperate.

After digging into the issue, I realized there were three main reasons why my app broke:

1. IE11 can’t run modern JavaScript (things like arrow functions, const, etc.) that sneak through un-transpiled inside node_modules.
2. IE11 needs polyfills for missing features like Promise, Object.assign, and more.
3. I was creating new Cookies() inside asyncData, which runs on both server and client. Since document.cookie doesn’t exist on the server, this blew up the SSR rendering.

Here’s how I fixed all three cleanly.

Transpile the Right Dependencies and Target IE11

Nuxt only transpiles my own app code by default. Libraries like Vuetify and universal-cookie ship ES2015+ syntax that IE11 can’t parse, so I had to tell Nuxt to transpile them.

// nuxt.config.js
export default {
  build: {
    transpile: [
      /^vuetify/,           // always transpile Vuetify
      'universal-cookie',   // universal-cookie ships ES2015+
      '@johmun/vue-tags-input'
    ],
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              targets: isServer ? { node: 'current' } : { ie: 11 }
            }
          ]
        ]
      }
    },
    extractCSS: true,
  }
}

Note: vendor: [...] is deprecated in newer Nuxt versions. What matters most for IE11 is making sure you transpile the right dependencies.

Add Polyfills Before the App Code Run

IE11 doesn’t understand Promises, async/await, or even some common functions like Object.assign. To fix this, I created a polyfill plugin.

// plugins/polyfills.client.js
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'whatwg-fetch' // only if I use window.fetch directly

Then I registered it:

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/polyfills.client.js', mode: 'client' }
  ]
}

If I needed polyfills during SSR too, I could also create a .server.js version, but for me the client-side was enough.

Don’t Instantiate Cookies on the Server

Here’s where I really shot myself in the foot. I was calling new Cookies() inside asyncData, which runs both on server (SSR) and client. But the server doesn’t have document.cookie, so it failed.

Here’s how I fixed it by checking whether I was on the server or client:

// pages/index.vue
export default {
  async asyncData({ req, store }) {
    let jwt

    if (process.server) {
      const cookieparser = require('cookieparser')
      const parsed = req && req.headers && req.headers.cookie
        ? cookieparser.parse(req.headers.cookie)
        : {}
      jwt = parsed.jwt
    } else {
      const Cookies = require('universal-cookie').default
      const cookies = new Cookies()
      jwt = cookies.get('jwt')
    }

    if (!jwt) {
      return {}
    }

    const { data } = await axios.get('/api/profile/view', {
      headers: { Authorization: `Bearer ${jwt}` }
    })

    store.dispatch('setuserData', data)
    return { data }
  }
}

And in login.vue, I adjusted it like this:

methods: {
  async Login(email, password) {
    await this.$store.dispatch('obtainToken', { email, password })
    const Cookies = require('universal-cookie').default
    const cookies = new Cookies()
    const jwt = cookies.get('jwt')
    if (jwt) {
      this.$router.push(this.$route.query.redirect || '/')
    } else {
      this.login_false = true
    }
  }
}

Even better: I later switched to cookie-universal-nuxt, which let me use this.$cookies.get('jwt') everywhere without worrying about server vs. client.

npm install cookie-universal-nuxt

// nuxt.config.js
export default {
  modules: ['cookie-universal-nuxt']
}

And now I can just do:

const jwt = app.$cookies.get('jwt')

Much cleaner!

Tidy Up Middleware

Finally, I simplified my auth middleware:

// middleware/auth.js
export default function ({ store, redirect }) {
  if (!store.state.auth || store.state.error) {
    return redirect('/login')
  }
}

Final Thought

Getting Nuxt.js to run smoothly in IE11 took some trial and error, but the fix came down to three things: transpiling the right dependencies, adding polyfills, and handling cookies correctly in SSR. Once I made those adjustments, the dreaded “An error occurred” finally disappeared. Even though IE11 is outdated, knowing how to patch these issues gave me a deeper understanding of how Nuxt works under the hood.