Vue Js: Issue with scoped slots and IE11

Question

My component looks like this:

<template>
    <div>
        <div v-if="!loaded">
            <p><i class="fas fa-spinner fa-spin"></i> Loading feed</p>
        </div>

        <div v-else>

            <div data-slider ref="feedSlider" v-if="length > 0">
                <div class="swiper-wrapper">
                    <div class="slide" v-for="record in records" :key="record.id">
                        <slot :record="record"></slot>
                    </div>
                </div>
            </div>

            <div v-else>
                <p>There are no records available.</p>
            </div>

        </div>

    </div>
</template>
<script>
    import Swiper from 'swiper';
    import AjaxCaller from '../../mixins/AjaxCaller';
    export default {
        mixins: [AjaxCaller],
        data() {
            return {
                loaded: false,
                records: [],
                length: 0,
            }
        },
        mounted() {
            this.makeCall(this.success, this.failure);
        },
        methods: {
            success(response) {
                this.loaded = true;
                if (!response.data.records) {
                    return;
                }
                this.records = response.data.records;
                this.length = this.records.length;
                if (this.length < 2) {
                    return;
                }
                setTimeout(() => {
                    this.initiateSlider();
                }, 1000);
            },
            initiateSlider() {
                (new Swiper(this.$refs.feedSlider, {
                    effect: 'slide',
                    slideClass: 'slide',
                    slideActiveClass: 'slide-active',
                    slideVisibleClass: 'slide-visible',
                    slideDuplicateClass: 'slide-duplicate',

                    slidesPerView: 1,
                    spaceBetween: 0,
                    loop: true,
                    speed: 2000,
                    autoplay: {
                        delay: 5000,
                    },
                    autoplayDisableOnInteraction: false,
                }));
            },
            failure(error) {
                this.stopProcessing();
                console.log(error);
            }
        }
    }
</script>

The imported mixin AjaxCaller, which works fine with any other component:

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            method: {
                type: String,
                default: 'post'
            }
        },
        data() {
            return {
                processing: false
            }
        },
        computed: {
            getMethodParams() {
                if (this.method === 'post') {
                    return {};
                }
                return this.requestData();
            },
            postMethodData() {
                if (this.method === 'get') {
                    return {};
                }
                return this.requestData();
            }
        },
        methods: {
            requestData() {
                return {};
            },
            startProcessing() {
                this.processing = true;
                this.startProcessingEvent();
            },
            stopProcessing() {
                this.processing = false;
                this.stopProcessingEvent();
            },
            startProcessingEvent() {},
            stopProcessingEvent() {},
            makeCall(success, failure) {
                this.startProcessing();
                window.axios.request({
                        url: this.url,
                        method: this.method,
                        params: this.getMethodParams,
                        data: this.postMethodData
                    })
                    .then(success)
                    .catch(failure);
            }
        }
    }
</script>

And here's how I call it from within the view:

<feed-wrapper url="{{ route('front.news.feed') }}">
    <div slot-scope="{ record }">
        <p>
            <a :href="record.uri" v-text="record.name"></a><br />
            <span v-text="record.excerpt"></span>
        </p>
    </div>
</feed-wrapper>

Everything works fine in any browser other than IE 11 (and lower). It even works in Edge - no issues what so ever.

In IE I get

[Vue warn]: Failed to generate render function:

Syntax Error: Expected identifier in ...

It doesn't even get to execute method call from within the mounted segment.

I use laravel-mix with Laravel so everything is compiled using webpack with babel so it's not ES6 related issue.

I've already spent whole night trying to un-puzzle this so any help would be much appreciated.

Answer 1

I know you've already said that you don't believe it's an ES6 issue but the evidence suggests it is.

IE11 doesn't support destructuring. If you type something like var {record} = {} into your IE11 console you'll see this same error message, 'Expected identifier'.

Try doing a search through the compiled code in your original error message and look for the word record. I suspect you'll find something like this:

fn:function({ record })

If you see that it means that the destructuring has made it to the browser without being compiled through Babel.

Exactly why this is happening depends on where you're using that scoped slot template. If you're using it inside a single-file component it should be going through Babel but if you aren't then it may be making it to the browser without transpiling. You said that you're calling it 'from within the view' but that doesn't clarify exactly how you're using it. There's a note about this in the docs, for what it's worth:

https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope

Assuming you aren't able to fix the transpiling problem directly (e.g. by moving the template to somewhere it'll go through Babel) you can just remove the ES6 destructuring. So something like:

<div slot-scope="slotProps">

and then using slotProps.record instead of record in the code that follows.