terryz / v-gallery Goto Github PK

Chrome 80 is crashing for some reason when interacting with v-gallery along with a few other libraries (Vue, VueRouter, and VueFilepond).

• Not sure exactly which library is causing the crash, but it occurs immediately after interacting with v-gallery. I cannot reproduce it without all four libraries in the project together. This code represents a minimal reproducible example.

• I've not been able to reproduce the bug in Chrome Canary 81, Firefox 74, or Safari 13.

• Also reproduces in Incognito Mode without any extensions enabled

Steps to reproduce

1. Install project from https://github.com/tony19-sandbox/chrome-crash-demo:

npm install

2. Start development web server:

npm run serve

3. Open http://localhost:8080/demo in Chrome 80

4. Click image to open lightbox (via v-gallery)

5. Close lightbox.

6. Click image again. Observe Chrome tab crashes (Aw, Snap!)

Environment

• macOS Catalina 10.15.3
• Chrome Version 80.0.3987.149 (Official Build) (64-bit)
• MacBook Pro 15", 2016

The error is : Failed to mount component: template or render function not defined.

Please look at this click in the menu bar on "Performance", scroll a little bit down and click on one of the graphs.

The prev, next and close symbols are not shown. When I use the developer tools I can switch off color: inherit and they are back.
Maybe it has a relation with my usage of Bootstrap4?

How can I fix that?

using v-gallery in vue press

v-gallery works satis during dev
Below error during build

ReferenceError: document is not defined at n (node_modules/v-gallery/dist/v-gallery.js:1:2026) at o (node_modules/v-gallery/dist/v-gallery.js:1:1856) at t.exports (node_modules/v-gallery/dist/v-gallery.js:1:3540) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:14711) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:3903) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:11594) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:11471) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at server-bundle.js:6537:566

• any suggestions ? , it works on the v-gallery documentation site using vuepres

Request

if you could point to the original docs for the v-gallery documentation site on git hub that would be highly helpful

While using v-gallery, the gallery seems to be working fine. However, when I change the type to carousel, I get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined while using Carousel

This error appears seconds after rendering.

Down here you can see the code I'm working with. The list is populated via the props on the component. They are working fine with the gallery type.

<script>
    import collect from 'collect.js';

    export default {
        props: [
            'jsonList',
            'apiUrl',
        ],

        data(){
            return {
                list: null,
            }   
        },

        mounted() {
            let parsedJSON = collect(JSON.parse(this.jsonList));

            this.list = parsedJSON.map((image) => {
                return {
                    title: image.custom_properties.alt,
                    url: this.apiUrl + image.id + "/" + image.file_name
                }
            }).toArray();
        }
    };
</script>

现在可以用手势切换图片了，但是捏放（放大缩小）功能缺失