The table component does not render under IE11, given : "Error in render: "TypeError: Object doesn't support property or method 'entries'""

Question

I'm new to the web app development, and work on a project using Vue cli, antd components, and it runs at IE11.

The IE11 seems not render the the component, it comment out the table.

IE11 element

also give the error at console:

[Vue warn]: Error in render: "TypeError: Object doesn't support property 
or method 'entries'"

I do check tickets from ant-design-vue, it looks like no one have the same problem, so I assume it is polyfill or ES5 to ES6 setting problem.

below is my html for the page

    <template>
      <div id="detailDash">
        <h1>{{id}}</h1>
        <a-table 
          :columns="columns" 
          :dataSource="data" 
          style="padding: 50px;" 
          :bordered="true">
        </a-table>
      </div>
    </template>

vuejs code

    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    const columns = [...];
    const innerColumns = [...];
    export default  {
      data(){
        return {
          id: '',
          status:'',
          data:[....],
          columns,
          innerColumns,
        }
      },
      created() {
          this.id = this.$route.params.envID;
      },
      methods:{
        checkStatus(){
          this.state = 'success'
          return status;
        }
      }
    }
    </script>

babel.config.js

// babel.config.js
    module.exports = {
      presets: [
        ['@vue/app', 
        {
          polyfills: [
            'es6.promise',
            'es6.symbol'
          ]
        }
      ]
      ]
    }

I have been google all day about this typeError, but not one was giving a clean solution, I really need some help for this!!

Answer 1

You need to add polyfills to older browsers in order to have them execute code which is intended for modern browsers. Object.entries is an example of a function which does not exist on IE.

As explained in my answer to this question you can polyfill statically (in your case by editing babel.config.js), or dynamically (by using a service like polyfill.io). The advantage to using a dynamic polyfill is that the API only ships what the browser actually needs, which reduces your bundle size.

Because you are using Vue CLI, you'll need to add a script tag to your public/index.html like this:

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.entries%2CSymbol.iterator"></script>

I've included Object.entries and Symbol.iterator based on your comments above. You will likely need more. Use the builder to add additional features.

Finally, you'll need to continually test your app to see which features are needed for successful execution in a given browser. You may need to repeat this process several times until all of the errors go away. Make sure to test on multiple pages, as not all of your page bundles will have the same requirements.