develodesign / vsf-payment-paypal

Paypal payment module for Vue Storefront
MIT License
45 stars 34 forks source link

Property or method "toJSON" is not defined with use global window object. #15

Closed dimasch closed 6 years ago

dimasch commented 6 years ago

It's not bloked checkout process, but need for fix.

[Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
dimasch commented 6 years ago

The possible workaround in load external paypal script https://www.paypalobjects.com/api/checkout.min.js to sw-precache storage. See https://stackoverflow.com/questions/40587733/caching-external-resources-with-sw-precache

Variant to install sw-toolbox and precache the external checkout.js in theme. yarn lerna add sw-toolbox --scope @vue-storefront/theme-default

+ @collymore

dimasch commented 6 years ago

I find workaround 1) yarn lerna add sw-toolbox --scope @vue-storefront/theme-default 2) In theme ./service-worker/index.js

import toolbox from 'sw-toolbox'
toolbox.precache(['dist/checkout.js'])

3) yarn lerna add copy-webpack-plugin --scope @vue-storefront/theme-default 4) In theme ./webpack.config.js

new CopyWebpackPlugin([
    { from: './extensions/lib/checkout.min.js', to: 'dest/' }
  ], options)
dimasch commented 6 years ago

Ultra fast workaround: Add checkout.js script to theme index ./src/themes/default/index.template.html as a link <script src="https://www.paypalobjects.com/api/checkout.min.js" async></script> My additional attribute async for load script in async mode and not block load app.js etc.

Or async form:

<script type="text/javascript">
            (function() {
                var wf = document.createElement('script');
                wf.src = ('https:' == document.location.protocol ? 'https' : 'https') +
                '://www.paypalobjects.com/api/checkout.min.js';
                wf.type = 'text/javascript';
                wf.async = 'true';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(wf, s);
            })();
        </script>
dimasch commented 6 years ago

Reopened.

collymore commented 6 years ago

Fixed in #39