2

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,

  1. we do not have a defined or explicit entry point in Nuxt app, where I could have imported that file import '@babel.polyfill', as stated in a number of places, including babel official documentation

  2. webpack 4 doesn't have an entry.vendor field either, where I could have injected that polyfill.

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.

waleed ali
  • 1,175
  • 10
  • 23

1 Answers1

2

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.

waleed ali
  • 1,175
  • 10
  • 23