Recaptcha: Uncaught TypeError: Cannot read property 'source' of null

[dmitrybelyakov]

Version

• 4.1.5 beta
• 5.0.0 beta3

Browser and OS info

• MacOS 10.14
• Chrome 69
• Firefox 62

Steps to reproduce

• Include recaptcha API: <script src='https://www.google.com/recaptcha/api.js?render=explicit'></script>
• Create a component with the code below
• Use it in an app
• Open up dev tools
• Refresh the page, ALL GOOD!
• Now switch to vue dev tools
• Refresh the page: Uncaught TypeError: Cannot read property 'source' of null

<template>
    <div class="recap">
        <div id="recaptcha" class="g-recaptcha"></div>
        <button @click="execute">Submit</button>
    </div>
</template>

<script>
export default {
    name: "my-recaptcha",
    mounted: function() {
        setTimeout(function(){
            grecaptcha.render('recaptcha', {
                sitekey: '6LdSW3MUAAAAMH5x0mi6Q8Ur8Sn7MAaz_4PCxxq',
                theme: 'light',
                badge: 'bottomright',
            });
        }, 1000)
    },
    methods: {
        execute: function(){
            grecaptcha.execute('recaptcha-id');
        }
    }
}
</script>

What is expected?

The component should render without errors

What is actually happening?

An error happens that points to:"... vue-devtools-proxy"===t.data.source ...I can also reproduce the issue in firefox. There's no issue with vue dev tools disabled.

This basically happens as soon as recaptcha's grecaptcha.render method is called. If we don't render recaptcha, no error happens even with vue devtools open.

[dmitrybelyakov]

This also affects community components such as:

• vue-invisible-recaptcha
• vue-recaptcha