Nuxt.js: Nuxt 2.3.1 modern build issues on IE11/Edge

[ettchan]

Version

v2.3.1

Reproduction link

https://codesandbox.io/s/3xx5176565

Steps to reproduce

Open link in either IE or Edge. Open the developer tools and click on console tab. Script error should appear in console.

What is expected ?

IE11/Edge should not have any scripting errors in developer mode

Edge 20.x should be served with the modern build

What is actually happening?

IE11/Edge receive a script error which halts the app's progress in loading

Edge 20.x gets served the legacy build

Additional comments?

Encountered an issue on Nuxt 2.3.1 around the modern build and IE11/Edge.

My team and I noticed that we are getting a generic script error on our dev builds on IE11/Edge when we set the modern to true in nuxt.config.js. This issue does not exist when the value is false. Wondering if there is a difference when the legacy client side app is built when the modern flag is off or on. I also attached some screenshots to show the console error we get, and where IE says the error is thrown in our code.

We are also noticing that Edge 20.x is not being served the modern build of our application despite it being a supported browser.

Thanks for the assistance.

_{This bug report is available on Nuxt community (#c8216)}

[clarkdo]

I downloaded the repo you provided, the resources are correct and no error in IE11 in my local 😸 , could you confirm you repo?

Edge:

IE11:

[ettchan]

Interesting, I wonder if there is something different between our environments. I also downloaded an ran the test app on my windows vm and this is what I received.

I also found the possible cause of my dev errors on IE. It looks to be caused by us using the filename property in build in nuxt.config.js. I updated the repo to reflect what we have, but when testing the page, I noticed that both Chrome and Edge were pulling down the same filenames. Theory is that we are only sending out the modern build of our app in our dev builds, which is causing IE to error out due to missing polyfills. That being said, I am not sure how we can resolve this besides having our dev builds using hashes. How does nuxt handle the naming between the legacy and modern builds?

[ettchan]

I figured out the dev issue on IE. It was what I said in the previous comment where we were only producing the modern javascript bundles which caused the IE issue. Just ended up using the same filename rules used in https://github.com/nuxt/nuxt.js/pull/4231/files

Unfortunately, the Edge issue still exists.

[rnenjoy]

You're not running Edge in legacy mode right?

[ettchan]

I am assuming you mean Emulating IE11 on Edge? Not doing that.

[rnenjoy]

Exactly!

[rnenjoy]

Im having sinilar issues. Edge gets modern build. But ie gets object.assign missing polyfill error and i cant get the polyfill to work.

[clarkdo]

@rnejoy Could you please provide a reproducible repo?

[rnenjoy]

@clarkdo i can try, but my main issue is that i dont know how to supply the polyfill to the legacy build.

[clarkdo]

Polyfill in legacy should be automatically injected in default babel config, are you using special babel config?

[rnenjoy]

Is my .babelrc screwing stuff up?

{ "presets": [], "plugins": [ "babel-plugin-inline-import", }

[clarkdo]

Can you paste your nuxt.config ?

[ettchan]

@rnenjoy for the legacy mode you were describing earlier, does IE11 have to be uninstalled from the Windows machine as well?

[rnenjoy]

Sorry for the delay!
@clarkdo

const nodeExternals = require('webpack-node-externals')
import path from 'path'
import fs from 'fs'

export default {
  env: {
    HOST: process.env.HOST,
    PORT: process.env.PORT,
    PORT_GRAPHQL: process.env.PORT_GRAPHQL,
    PORT_GRAPHQLWS: process.env.PORT_GRAPHQL_WS,
  },

  srcDir: 'src/',

  /* server: {
     https: {
       key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
       cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
     }
   },*/

  /*
  ** Headers of the page
  */
  head: {
    title: '.',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: '',
        name: '',
        content: '',
      },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Material+Icons',
      },
    ],
  },

  plugins: [
    '~/plugins/vuetify.js',
    '~/plugins/vuelidate.js',
    { src: '~/plugins/google-maps.js', ssr: true },
    { src: '~/plugins/persistedState.js', ssr: false },
  ],

  css: ['~/assets/style/app.styl'],
  /*  
  ** Customize the progress bar color
  */
  loading: { color: '#65a877' },

  // Add apollo module
  modules: [
    '@nuxtjs/apollo',
    '@nuxtjs/router',
    '@nuxtjs/proxy',
    'cookie-universal-nuxt',
  ],

  // Add stylus loader to our css
  module: {
    loaders: [{
      test: /\.styl$/,
      loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-stylus/stylus/'
    }]
  },

  // Give apollo module options
  apollo: {
    clientConfigs: {
      default: {
        // required
        httpEndpoint: 'http://' + process.env.HOST + ':' + process.env.PORT + '/graphql',
        // You can use `wss` for secure connection (recommended in production)
        // Use `null` to disable subscriptions
        // wsEndpoint: 'ws://10.0.1.8:' + process.env.PORT + '/graphqlws', // optional
        // LocalStorage token
        tokenName: 'apollo-token', // optional
        // Enable Automatic Query persisting with Apollo Engine
        persisting: false, // Optional
        // Use websockets for everything (no HTTP)
        // You need to pass a `wsEndpoint` for this to work
        websocketsOnly: false, // Optional
      },
    },
  },

  // Proxy
  proxy: {
    // Proxies /graphql to http://localhost:3001/graphql
    // We tell the graphql client to connect to host:sameport/graphql to not get cors protection
    // Then we proxy it locally to the real graphql server that is located on the ports below.
    '/api': { target: 'http://localhost:' + process.env.PORT_GRAPHQL, ws: false },
    // '/api': { target: 'http://localhost:3001', ws: false },
    '/graphql': { target: 'http://localhost:' + process.env.PORT_GRAPHQL + '/graphql', ws: false },
    //  '/graphql': { target: 'http://localhost:4001/graphql', ws: false },
    '/graphqlws': { target: 'http://localhost:' + process.env.PORT_GRAPHQL_WS + '/graphql', ws: true },
    // '/graphqlws': { target: 'http://localhost:4002/graphql', ws: true },
  },

  /*
  ** Build configuration
  */
  build: {
    extractCSS: true,
    maxChunkSize: 30000,

    // Fix for google maps plugin unexpected token
    transpile: [/^vue2-google-maps($|\/)/],

    /*
    ** Run ESLint on save
    */
    extend(config) {
      if (process.dev) {
        config.devtool = '#eval-source-map'
      }

      if (process.dev && process.client) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }

      if (process.server) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/],
          }),
        ]
      }
    },
  },
}

[rnenjoy]

@rnenjoy for the legacy mode you were describing earlier, does IE11 have to be uninstalled from the Windows machine as well?

@ettchan No IE legacy / compatible mode is turned on/off inside Settings menu. Compatible menu.
There is also a menu when clicking F12 to emulate the browser.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[dynamite-ready]

Is there an official answer for running Nuxt on IE11?

[adrianbw]

I'm having issues with this, too. I've had to use polyfill.io to polyfill Object.assign and Object.entries.

[clarkdo]

@adrianbw Could you provide a repo that can reproduce the issue?

[adrianbw]

I've been trying, but I can't track it down. Somewhere between a fresh Nuxt app and our application, this isn't working. I can't share the whole repo, but maybe our config and package.json might help?

/*eslint-disable*/

const pkg = require("./package");

const NUXT_URL = "http://localhost:3000";
const WP_URL = "http://localhost:8080";

module.exports = {
  mode: "universal",

  /*
   ** env properties can be access via process.env or context.env
   ** https://nuxtjs.org/api/configuration-env
   */
  env: {
    WP_URL: WP_URL,
    DNR_EMAIL: "[email protected]"
  },

  /*
   ** Headers of the page
   */
  head: {
    title: "Application Name",
    /* eslint-disable prettier/prettier */
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
      { name: "msapplication-TileColor", content: "#da532c" },
      { name: "msapplication-TileImage", content: "/favicon/mstile-144x144.png" },
      { name: "msapplication-config", content: "/favicon/browserconfig.xml" },
      { name: "theme-color", content: "#ffffff" },
      { title: "Application Name" }
    ],
    link: [
      { rel: "stylesheet", href: "https://fast.fonts.net/cssapi/3ef4a15b-f8bf-48ca-8c77-8919430fdee8.css" },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.6.1/css/all.css",
        integrity: "sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP",
        crossorigin: "anonymous"
      },
      { rel: "apple-touch-icon", sizes: "57x57", href: "/favicon/apple-touch-icon-57x57.png" },
      { rel: "apple-touch-icon", sizes: "60x60", href: "/favicon/apple-touch-icon-60x60.png" },
      { rel: "apple-touch-icon", sizes: "72x72", href: "/favicon/apple-touch-icon-72x72.png" },
      { rel: "apple-touch-icon", sizes: "76x76", href: "/favicon/apple-touch-icon-76x76.png" },
      { rel: "apple-touch-icon", sizes: "114x114", href: "/favicon/apple-touch-icon-114x114.png" },
      { rel: "apple-touch-icon", sizes: "120x120", href: "/favicon/apple-touch-icon-120x120.png" },
      { rel: "apple-touch-icon", sizes: "144x144", href: "/favicon/apple-touch-icon-144x144.png" },
      { rel: "apple-touch-icon", sizes: "152x152", href: "/favicon/apple-touch-icon-152x152.png" },
      { rel: "apple-touch-icon", sizes: "180x180", href: "/favicon/apple-touch-icon-180x180.png" },
      { rel: "icon", type: "image/png", href: "/favicon/favicon-32x32.png", sizes: "32x32" },
      { rel: "icon", type: "image/png", href: "/favicon/android-chrome-192x192.png", sizes: "192x192" },
      { rel: "icon", type: "image/png", href: "/favicon/favicon-96x96.png", sizes: "96x96" },
      { rel: "icon", type: "image/png", href: "/favicon/favicon-16x16.png", sizes: "16x16" },
      { rel: "manifest", href: "/favicon/manifest.json" },
      { rel: "mask-icon", href: "/favicon/safari-pinned-tab.svg", color: "#5bbad5" },
      { rel: "shortcut icon", href: "/favicon/favicon.ico" }
      /* eslint-enable prettier/prettier */
    ]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: "#fff" },

  /*
   ** Global CSS
   */
  // eslint-disable-next-line prettier/prettier
  css: ["@/assets/scss/_global.scss", "@/node_modules/vue-multiselect/dist/vue-multiselect.min.css"],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [{ src: "~/plugins/vue-select", ssr: false }],

  serverMiddleware: [
    { path: "/admin/tools", handler: "~/middleware/auth.js" },
    { path: "/api/admin/data_upload", handler: "~/middleware/auth.js" }
  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    "@nuxtjs/axios",
    "@nuxtjs/apollo",
    // "@nuxtjs/auth",
    "nuxt-vuex-router-sync",
    "@nuxtjs/style-resources",
    "cookie-universal-nuxt",
    [
      "nuxt-rollbar-module",
      {
        serverAccessToken: "b4e3178620db4f3eba221e2a3ea4a7a2",
        clientAccessToken: "a3176938ec0d4120af84b08cfdb7605a",
        config: {
          // Addtional config
        }
      }
    ],
    [
      "@nuxtjs/redirect-module",
      // eslint-disable-next-line prettier/prettier
      [{ from: "^/wp-admin", to: WP_URL }, { from: "^/login", to: "/admin/login" }]
    ],
    [
      "@nuxtjs/google-analytics",
      {
        id: "UA-98424235-1",
        debug: {
          sendHitTask: process.env.NODE_ENV === "production"
        }
      }
    ]
  ],
  styleResources: {
    scss: ["~assets/scss/_mixins.scss", "~assets/scss/_variables.scss"]
  },
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    browserBaseURL: NUXT_URL
  },

  apollo: {
    tokenName: "apollo-token", // default value
    tokenExpires: 10, // default 7 days
    includeNodeModules: true, // this includes graphql-tag for node_modules
    authenticationType: "Basic", // default 'Bearer'
    // optional
    errorHandler(error) {
      console.log("Global error handler");
      console.error(error.message);
      console.error(error.graphQLErrors);
      console.error(error.networkError);
      console.error(error.gqlError);
    },
    // required
    clientConfigs: {
      default: {
        httpEndpoint: "http://localhost:8080/graphql"
        // wsEndpoint: "ws://localhost:8080/graphql"
      }
    }
  },



  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      if (ctx.isClient) {
        config.devtool = "#source-map";
      }
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    },
    vendor: ["vue-select"]
  }
};

Dependencies:

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxxx",
  "author": "2wav inc.",
  "private": true,
  "scripts": {
    "local": "cross-env NODE_ENV=development MONGO_SERVER=localhost/app nodemon server/index.js --watch server CI=true",
    "local-debug": "cross-env NODE_ENV=development MONGO_SERVER=localhost/app node --inspect server/index.js",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production MONGO_SERVER=localhost/app node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@nuxtjs/apollo": "^4.0.0-rc2.3",
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/google-analytics": "^2.0.3",
    "@nuxtjs/redirect-module": "^0.2.0",
    "@nuxtjs/style-resources": "^0.1.2",
    "@vue/cli-shared-utils": "^3.3.0",
    "ajv": "^6.9.1",
    "aws-sdk": "^2.402.0",
    "bcrypt": "^3.0.4",
    "chart.js": "^2.7.3",
    "compression": "^1.7.3",
    "cookie-universal-nuxt": "^2.0.14",
    "cross-env": "^5.2.0",
    "csv": "^5.1.1",
    "d3": "^5.9.1",
    "d3-geo": "^1.11.3",
    "express": "^4.16.4",
    "express-validator": "^5.3.1",
    "file-saver": "^2.0.0",
    "filesaver": "0.0.13",
    "fs-extra": "^7.0.1",
    "graphql-tag": "^2.10.1",
    "in-view": "^0.6.1",
    "install": "^0.12.2",
    "jquery": "^3.3.1",
    "least-squares": "0.0.2",
    "lodash": "^4.17.11",
    "mongoose": "^5.4.11",
    "multer": "^1.4.1",
    "node-ses": "^2.2.0",
    "nodemailer": "^5.1.1",
    "npm": "^6.6.0",
    "nuxt": "^2.4.3",
    "nuxt-rollbar-module": "^1.0.1",
    "nuxt-sass-resources-loader": "^2.0.5",
    "nuxt-vuex-router-sync": "^0.0.2",
    "platform": "^1.3.5",
    "shortcode-tokenizer": "^0.6.1",
    "slugify": "^1.3.4",
    "topojson": "^3.0.2",
    "voca": "^1.4.0",
    "vue-chartjs": "^3.4.0",
    "vue-form": "^4.10.1",
    "vue-multiselect": "^2.1.3",
    "vue-recaptcha": "^1.1.1",
    "vue-select": "^2.5.1",
    "vueinview": "github:rachmanzz/vue-inview",
    "vuejs-datepicker": "^1.5.4"
  },
  "devDependencies": {
    "acorn": "^6.1.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.13.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-prettier": "3.0.1",
    "eslint-plugin-vue": "^5.2.1",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "prettier": "1.16.4",
    "sass-loader": "^7.1.0"
  }
}

[manniL]

Maybe related to devalue? :thinking:
(https://github.com/Rich-Harris/devalue/pull/18)

[husayt]

@manniL not sure if it is related to devalue, but this is a major problem for me too. I get

Object doesn't support property or method 'from'

error in IE11.

I ended up importing catch-all polyfill as first import.

import "@babel/polyfill/dist/polyfill"

This does the job, but I loose on demand polyfills. Would be great if some one can advise what is the best way to add certain polyfills to vendors or maybe it is indeed a bug. I spent all day trying to figure out the issue, tried all the options for "@nuxt/babel-preset-app", even added documentation to it in the process, but nothing worked.

[homerjam]

@husayt where did you add the line below exactly please?

import "@babel/polyfill/dist/polyfill"

[aldarund]

fyi devalue issue was fixed and released some time ago

[tanhernandez]

Good day! I kindly ask, did anybody had a fix for this? I happen to encounter it on Nuxt v2.8.1 using IE 11.

[fannyfan414]

Good day! I kindly ask, did anybody had a fix for this? I happen to encounter it on Nuxt v2.8.1 using IE 11.

same issue!

[tanhernandez]

@fannyfan414 I actually resolved it via putting this in my nuxt.config.js

/*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {},

    babel: {
      presets: function ({isServer}, [preset, options]) {

        const r = [
          [
            preset, {
            buildTarget: isServer ? 'server' : 'client',
            ...options
          }]
          // [ Other presets ]
        ];

        r[0][1].targets = {
          "browsers": ["> 1%", "last 2 versions"],
          ie: 11
        };

        r[0][1].polyfills = [
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es6.symbol',
          'es6.array.find',
          'es6.array.from',
          'es7.promise.finally',
          'es7.object.entries',
        ];

        return r;
      },

      plugins: [
        ['@babel/plugin-transform-runtime']
      ]
    }

I'm using the polyfills from core-js so there's no need for additional npm install.

EDIT: Included the plugins part
EDIT: Corrected the misplaced plugins part

[fannyfan414]

@fannyfan414 I actually resolved it via putting this in my nuxt.config.js

/*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {},

    babel: {
      presets: function ({isServer}, [preset, options]) {

        const r = [
          [
            preset, {
            buildTarget: isServer ? 'server' : 'client',
            ...options
          }]
          // [ Other presets ]
        ];

        r[0][1].targets = {
          "browsers": ["> 1%", "last 2 versions"],
          ie: 11
        };

        r[0][1].polyfills = [
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es7.promise.finally',
          'es6.symbol',
          'es6.array.find',
          'es6.array.from'
        ];

        return r;
      },
    }
  }

I'm using the polyfills from core-js so there's no need for additional npm install.

Please, can you show your package.json?

[tanhernandez]

@fannyfan414, this is my package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "ant-design-vue": "^1.1.10",
    "cookie-universal-nuxt": "^2.0.16",
    "cross-env": "^5.2.0",
    "lodash": "^4.17.14",
    "moment": "^2.24.0",
    "nuxt": "^2.0.0",
    "nuxt-i18n": "^5.12.7",
    "vue-markdown": "^2.2.4"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@nuxtjs/dotenv": "^1.3.0",
    "@nuxtjs/style-resources": "^0.1.2",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.18.9",
    "sass-loader": "^7.1.0"
  }

[nachogarcia]

In case the same is happening to you:
I realized that nuxt isn't inserting the polyfills (for IE 11 in my case) in development mode (with hot reload) but it is working fine when doing the build for production and serving it. Which makes sense, but couldn't find anywhere in the docs.
So for me in the end it was just a matter of testing IE trough nuxt build && nuxt start instead of nuxt.

[tanhernandez]

Thanks for pointing out @nachogarcia 👍

[clarkdo]

@nachogarcia I'll have a look at the issue you mentioned, thanks!

[clarkdo]

I think this is because that some lib in node_modules you’re using includes some syntax or features which are not supported by IE11 and it’s not transpiled by babel, so could you find the lib from error stack and put it into build.transpile ?

[clarkdo]

@nachogarcia For hmr issue mentioned above, could you try by latest nuxt-edge ?

[nachogarcia]

Sorry @clarkdo , ATM my current project doesn't work with nuxt-edge (we have some custom configs) when I have some out of work time will try to do so.

[GitHdu]

ie reported error after importing polyfill, how to solve it? @clarkdo

HTML1300: 进行了导航。
10.0.2.2:3000
polyfill-eventsource added missing EventSource to window
%c🚀 Nuxt SSR Logs
   %c 
      background: #7f8c8d;
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;

SCRIPT1002: 语法错误
ads.6411bd9b.js (115,1)
%cerror 
      background: #c0392b;
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;
     ChunkLoadError: Loading chunk vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b failed.
(missing: http://10.0.2.2:3000/_nuxt/vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b.js)
   "%cerror"
   "
      background: #c0392b;
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;
    "
   {
      [functions]: ,
      __proto__: { },
      description: "",
      message: "Loading chunk vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b failed.
(missing: http://10.0.2.2:3000/_nuxt/vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b.js)",
      name: "ChunkLoadError",
      number: 0,
      request: "http://10.0.2.2:3000/_nuxt/vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b.js",
      stack: "ChunkLoadError: Loading chunk vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b failed.
(missing: http://10.0.2.2:3000/_nuxt/vendors.pages/about/index.pages/about/reward_unit.pages/ads/adventage_unit.pages/ads/index.pages/ads.6411bd9b.js)
   at Anonymous function (http://10.0.2.2:3000/_nuxt/runtime.js:179:14)
   at run (http://10.0.2.2:3000/_nuxt/commons.app.js:11072:13)
   at Anonymous function (http://10.0.2.2:3000/_nuxt/commons.app.js:11089:30)
   at flush (http://10.0.2.2:3000/_nuxt/commons.app.js:6778:9)",
      Symbol()_n.b6zc8tc16oy: undefined,
      Symbol()_o.b6zc8tc16oy: undefined,
      Symbol(foo)_p.b6zc8tc16oy: undefined,
      Symbol(react.element)_h.b6zc8tc16oy: undefined,
      type: "missing"
   }

%cinfo 
      background: #00BCD4;
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;
     Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
%cinfo 
      background: #00BCD4;
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;
     You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

[clarkdo]

Please provide a reproducible repo

[ics-nishihara]

I had same issue. It caused by 2byte character, Japanese Kanji included in data attribute in my case.
I could resolve it to remove Kanji character.
Please check it.

[kurukururuu]

same here also.
and a line of :
TypeError: Object doesn't support property or method 'querySelectorAll'

instead of ChunkLoadError in "%cerror" part after padding: 2px 0.5em;

[thuringia]

@clarkdo Why is the "solution" mentioned by @nachogarcia not fixed yet, or even mentioned in the docs?

[homerjam]

@thuringia we await your PR

[thuringia]

@homerjam I'm not sure this is the correct way to respond here. This issue is open for months, so long that is is marked stale... I can only interpret this as a lack of interest in supporting IE 11 or similar legacy environment, which is an absolutely understandable decision.
However, if that is the case, why not just mention this in the docs with a mention of the last compatible version?

I did not intend to come of as antagonistic in my comment. However, I had to deal with an angered customer who pays for IE11 support, and after almost 6h of reading Nuxt source code and massaging nuxt configuration I have to find out that the tool that supposedly supports this environment by default does not emit code to make this happen.

Now let's talk about finding a real solution here, instead of having a pitty-party or writing snarky comments.
We can always put the workaround in the docs, but it will cause confusion why this behavior is happening in the first place. To answer this question support from the nuxt maintainers is needed to get into the specifics of how the build pipeline works.

[clarkdo]

@thuringia The "issue" is not fixed yet is because of it's not issue from Nuxt.js code, if any 3rd party lib you're using contains your Node.js incompatible syntax, the error will happen. In this case you can add the lib into transpile.

If your issue is another case, please provide me a reproduciable repo so that I can find the root cause, or it's really hard for me to guess what's the issue.

About the doc, I'll draft on faq, thanks.

[thuringia]

@clarkdo I our case the issue is related to @babel/runtime (which Nuxt ships as a dependency) uses Array.from. The polyfill for this is not being added when using useBuiltIns: "usage", which is the default setting, but only by using useBuiltIns: "entry", adding @babel/polyfill as a dependency in my package.json and the import this in layouts/default.vue

As it is not working when using the default nuxt config, this is a bug in Nuxt.js

[clarkdo]

As useBuiltIns: "usage" is a babel option, so it's hard to say if this is a nuxt bug, babel bug or a special case your project.

If useBuiltIns: "usage" doesn't work in your project, switching to entry doesn't really solve the problem but just ignore root cause and using entry will increase your entry file size by adding uncommon used polyfills.

It would be great that you can provide a repo, then I can have a look and find out the root cause.

[silvio-e]

@tanhernandez your solution worked for me, only that:

plugins: ['@babel/plugin-transform-runtime']

is in the wrong line. It has to be included in babel. For me it is correct like that:

babel: {
      presets: function ({isServer}, [preset, options]) {

        const r = [
          [
            preset, {
            buildTarget: isServer ? 'server' : 'client',
            ...options
          }]
          // [ Other presets ]
        ];

        r[0][1].targets = {
          "browsers": ["> 1%", "last 2 versions"],
          ie: 11
        };

        r[0][1].polyfills = [
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es7.promise.finally',
          'es6.symbol',
          'es6.array.find',
          'es6.array.from'
        ];

        return r;
      },
      plugins: ['@babel/plugin-transform-runtime']
    }

[craigPeckett]

I have found that errors only occur in development mode. If you run build then run start everything seems to work ok

[tanhernandez]

@tanhernandez your solution worked for me, only that:

plugins: ['@babel/plugin-transform-runtime']

is in the wrong line. It has to be included in babel. For me it is correct like that:

babel: {
      presets: function ({isServer}, [preset, options]) {

        const r = [
          [
            preset, {
            buildTarget: isServer ? 'server' : 'client',
            ...options
          }]
          // [ Other presets ]
        ];

        r[0][1].targets = {
          "browsers": ["> 1%", "last 2 versions"],
          ie: 11
        };

        r[0][1].polyfills = [
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es7.promise.finally',
          'es6.symbol',
          'es6.array.find',
          'es6.array.from'
        ];

        return r;
      },
      plugins: ['@babel/plugin-transform-runtime']
    }

Oh yeah! Sorry about that, yours is how exactly I've done it but seems that I've misplaced the plugins part in my comment. I've corrected my comment above. Thanks for catching that.

[AndrewBogdanovTSS]

I use --modern flag to create 2 builds for my project. @tanhernandez Is there any way to make Nuxt add polyfills only inside regular build, but not the modern one?

[tanhernandez]

@AndrewBogdanovTSS Haven't tried that yet buddy, sorry

[remarks]

@AndrewBogdanovTSS you can add the polyfills in the transpile options with isLegacy via https://nuxtjs.org/api/configuration-build/#transpile

[AndrewBogdanovTSS]

@remarks but isn't it a default behavior?

[ruthirlekar92]

@tanhernandez I tried the solution you gave, But I am getting error when I run the project. Can you please help me here. The error that I get is
`

An error occured, please see below or look at Nuxt.js terminal for more info.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[3] should be one of these:object { apply, … } | function -> Plugin of type object or instanceof FunctionDetails:* configuration.plugins[3] should be an object. -> Plugin instance* configuration.plugins[3] should be an instance of function -> Function acting as plugin

• configuration.plugins[3] should be one of these:
  object { apply, … } | function
  -> Plugin of type object or instanceof Function
  Details:
  
  
  
  • configuration.plugins[3] should be an object.
    
    -> Plugin instance
  
  
  • configuration.plugins[3] should be an instance of function
    
    -> Function acting as plugin
    
    at webpack (node_modules\webpack\lib\webpack.js:31:9)
    
    at compilers.webpackConfigs.map (node_modules\@nuxt\webpack\dist\webpack.js:5238:24)
    
    at Array.map ()
    
    at WebpackBundler.build (node_modules\@nuxt\webpack\dist\webpack.js:5237:37)
    
    at
  
  

Note: A manual restart of the Nuxt.js dev server may be required
`

I also tried Manual restart din't worked for me.

[tanhernandez]

@tanhernandez I tried the solution you gave, But I am getting error when I run the project. Can you please help me here. The error that I get is
`

An error occured, please see below or look at Nuxt.js terminal for more info.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[3] should be one of these:object { apply, … } | function -> Plugin of type object or instanceof FunctionDetails:* configuration.plugins[3] should be an object. -> Plugin instance* configuration.plugins[3] should be an instance of function -> Function acting as plugin

• configuration.plugins[3] should be one of these:
  object { apply, … } | function
  -> Plugin of type object or instanceof Function
  Details:

• configuration.plugins[3] should be an object.
  -> Plugin instance

• configuration.plugins[3] should be an instance of function
  -> Function acting as plugin
  at webpack (node_modules\webpack\lib\webpack.js:31:9)
  at compilers.webpackConfigs.map (node_modules@nuxt\webpack\dist\webpack.js:5238:24)
  at Array.map ()
  at WebpackBundler.build (node_modules@nuxt\webpack\dist\webpack.js:5237:37)
  at

Note: A manual restart of the Nuxt.js dev server may be required
`

I also tried Manual restart din't worked for me.

To be honest, there are further problems that I have experienced on the way so I just stopped using Nuxt and went back using Vue CLI.

[AndrewBogdanovTSS]

@remarks isLegacy is cool but my idea is that I don't want to include polyfills at all in modern build. The way I sorted it out is by using nuxt-polyfill

[simplenotezy]

@husayt where did you add the line below exactly please?

import "@babel/polyfill/dist/polyfill"

Sorry, where is this supposed to be added?

[aphavichitr]

Has anyone been able to resolve this issue? I've tried most solutions in this thread and other threads and haven't been able to fix this. Keep having the SCRIPT1028: Expected identifier, string or number. When i click on the file that errors, it's showing the spread operator line:
let data={...n.state}<--- this line isn't even in my code, i'm guessing it's from node_modules? Any suggestions are appreciated, been stuck on this for over a week now and can't release this to our Microsoft users.

[AndrewBogdanovTSS]

@aphavichitr first you need to make sure that this error is not coming from any of your dependencies but nuxt core. Most probably you are experiencing of an issue of some other developer decided to not care about IE11 support. So please, track down to what exact lib/piece of code is causing an issue

[simplenotezy]

I was running with a package, and after your comment @AndrewBogdanovTSS I went ahead and checked the specific package, where I noticed the error was in source code. It turned out to have a IE Transpile option, so I went ahead and activated that, and deploying now so I can test. Thanks a lot!

https://github.com/rubystarashe/nuxt-vuex-localstorage#ie-transpile

[simplenotezy]

@aphavichitr It looks like we both use the same package for localStorage. See my comment above, it might solve your issue. Anyhow, I'll post here my progress if it is resolved, once deploy has finished and I can test.

[simplenotezy]

Thank you @AndrewBogdanovTSS. To everyone else experincing IE issues: it looks like Nuxt work out of the box, without any extra configuration, with at least IE 11. It might be a package/module/plugin that you're using that is not yet compatible, or that needs extra configuration in order to work with IE.

@aphavichitr see https://github.com/rubystarashe/nuxt-vuex-localstorage#ie-transpile to solve your issue

[aphavichitr]

@AndrewBogdanovTSS @simplenotezy Thanks guys that was it!! It was not working because of the nuxt-vuex-localstorage package, but after I updated the transpile option it's now working on both Microsoft Edge and IE 11 browsers. LIke @simplenotezy said, no additional configuration is needed for Nuxt out of the box. Hope this helps anyone else encountering the same issue.

Now I have other rendering issues on Edge/IE 11...

[AndrewBogdanovTSS]

@aphavichitr yeah, these days not a lot of library authors actually care about IE11 so it's a good thing that at least Nuxt core and Vue still take it seriously. I really hope that in couple of years I will be able to also not care about IE11 and leave all of this hell in the past, but until than I guess we have to keep bugging those guys with github tickets 😂

[mhilland]

for anyone else experiencing this issue, i found a solution after countless hours of head scratching by manually importing all of the es7 modules using my own custom plugin, as suggested here. the full solution looks like this:

nuxt.config.js

plugins: [
  { src: '~/plugins/polyfills', mode: 'client' },
],

plugins/polyfills.js

import 'core-js/es7'

you could probably get away with importing just the modules you need for your project, but it doesn't really hurt to play it extra safe and import the whole deal. i'm puzzled why nuxt doesn't automatically import the necessary modules, despite me specifying ie: 11 in my targets for @nuxt/babel-preset-app :/

[clarkdo]

@mhilland Looks your issue is related to client build which is different from original issue, can you please provide a minimum reproducible repo so that we can look into the root cause of polyfill is not imported?

[mhilland]

@clarkdo i actually ended up approaching this a different way, as doing it the way i mentioned causes the modern build to break in IE11. basically, the polyfills should only be included in the legacy (client) build. to work around this, i removed my plugin and instead used the polyfills option of @nuxt/babel-preset-app to manually include the polyfills, as needed.

here's the babel block of my nuxt.config.js for reference:

babel: {
  presets ({ envName }) {
    const envTargets = {
      client: {
        targets: {
          browsers: ['>0.25%, ie 11, not op_mini all, not dead'],
          ie: 11,
        },
        polyfills: [
          // defaults: https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app#options
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es7.promise.finally',
          // added
          'es7.object.values',
        ]
      },
    }

    return [
      [
        '@nuxt/babel-preset-app',
        {
          ...envTargets[envName],
        },
      ],
      [
        '@vue/babel-preset-jsx',
        {
          injectH: false,
        },
      ],
    ]
  },
  plugins: ['@babel/plugin-syntax-dynamic-import'],
},

[clarkdo]

basically, the polyfills should only be included in the legacy (client) build

Unfortunately, this not 100% true, some polyfills still need to be injected into modern browsers as they still have unsupported features.

More detials, you can have a look at: https://github.com/nuxt/nuxt.js/issues/6851#issuecomment-573827466

@mhilland If you found any polyfill needs to be imported but not , can you provide us repo ? So that we can look into and fix the exact issue.