Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am building a static site with nuxt vuetify template and while it's awesome and provides so many configurations and setup already done for me, I am finding it really hard to enable my site running smoothly on Internet Explorer (11).

Since, the ES6 code needs be transpiled, I am trying to configure babel in my app, and this is my very first experience of configuring babel (so, please ignore my lack of knowledge in the domain). there are so many issues/questions on the internet, and I have tried almost all but in vain.

TL;DR , I am using Nuxt 2.x (and Webpack 4, internally), I do not have a clue where and how do I include the @babel/polyfill because,

here is my nuxt.config.js :

babel: {
      presets: [
        ['@babel/preset-env', {
          'useBuiltIns': 'usage',
          'targets': '> 0.25%, not dead'
      plugins: ['@babel/plugin-syntax-dynamic-import', [
        '@babel/plugin-transform-runtime',
          'corejs': false,
          'helpers': true,
          'regenerator': true,
          'useESModules': false
      'configFile': false,
      'babelrc': false
here are the versions of packages I am using:
"dependencies": {
    "@babel/polyfill": "^7.2.5"
"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/runtime-corejs2": "^7.3.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-node": "^2.2.0"
following this thread, I also thought to push babel polyfill as a vendor to webpack entry object but it gives me the error: Cannot set property 'vendor' of undefined because, apparently, webpack 4 configs doesn't have an entry field, just like webpack 3 used to have.
this is my webapack config:
  name: 'client',                                                                                                                                                                                 
  mode: 'production',
  devtool: false,
  optimization: 
   { runtimeChunk: 'single',
     minimize: true,
     minimizer: undefined,
     splitChunks: 
      { chunks: 'all',
        automaticNameDelimiter: '.',
        name: undefined,
        cacheGroups: [Object] } },
  output: 
   { path: '/home/waleed/project/.nuxt/dist/client',
     filename: '[chunkhash].js',
     chunkFilename: '[chunkhash].js',
     publicPath: '/_nuxt/' },
  performance: { maxEntrypointSize: 1024000, hints: 'warning' },
  resolve: 
   { extensions: [ '.wasm', '.mjs', '.js', '.json', '.vue', '.jsx' ],
     alias: 
      { '~': '/home/waleed/project',
        '~~': '/home/waleed/project',
        '@': '/home/waleed/project',
        '@@': '/home/waleed/project',
        assets: '/home/waleed/project/assets',
        static: '/home/waleed/project/static' },
     modules: 
      [ 'node_modules',
        '/home/waleed/projectnode_modules',
        '/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
  resolveLoader: 
   { modules: 
      [ 'node_modules',
        '/home/waleed/project/node_modules',
        '/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
  module: 
   { rules: 
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  plugins: 
   [ VueLoaderPlugin {},
     WarnFixPlugin {},
     WebpackBarPlugin {
       profile: false,
       handler: [Function],
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true,
       options: [Object],
       reporters: [Array] },
     MiniCssExtractPlugin { options: [Object] },
     HtmlWebpackPlugin { options: [Object] },
     HtmlWebpackPlugin { options: [Object] },
     VueSSRClientPlugin { options: [Object] },
     DefinePlugin { definitions: [Object] } ] 
P.S: I have already seen and tried this question, and it surely have somewhat worked too, but my use case demands not to use polyfill.io.
For all those, banging their heads like me, (as a temporary solution) I decided to go with babel-polyfill CDN and included its url in scripts section of nuxt.config.js file, as under
script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js' }
However, I am still looking for a cleaner and more ES6ish import or require syntax for achieving the required results. So, please feel free to add more answers if you have one such solution.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.