HumanSignal / label-studio-frontend

Data labeling react app that is backend agnostic and can be embedded into your applications — distributed as an NPM package
https://labelstud.io/
Apache License 2.0
419 stars 316 forks source link

[HMR][Svelte] Unrecoverable HMR error in <LabelStudio>: next update will trigger a full reload #1334

Open dastratakos opened 1 year ago

dastratakos commented 1 year ago

Summary

I would like to use LSF in Svelte but am running into this error:

[HMR][Svelte] Unrecoverable HMR error in <LabelStudio>: next update will trigger a full reload

It then causes this second error:

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')

Steps to reproduce:

  1. Install
    npm install label-studio
  2. Copy code from README.md into new Svelte component

Code

<script lang="ts">
    import LabelStudio from 'label-studio';
    import 'label-studio/build/static/css/main.css';

    console.log('LabelStudio:', LabelStudio);

    var labelStudio = new LabelStudio('label-studio', {
        config: `
            <View>
                <Image name="img" value="$image"></Image>
                <RectangleLabels name="tag" toName="img">
                    <Label value="Hello"></Label>
                    <Label value="World"></Label>
                </RectangleLabels>
            </View>
        `,

        interfaces: [
            'panel',
            'update',
            'submit',
            'controls',
            'side-column',
            'annotations:menu',
            'annotations:add-new',
            'annotations:delete',
            'predictions:menu'
        ],

        user: {
            pk: 1,
            firstName: 'James',
            lastName: 'Dean'
        },

        task: {
            annotations: [],
            predictions: [],
            id: 1,
            data: {
                image:
                    'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg'
            }
        },

        onLabelStudioLoad: function (LS) {
            var c = LS.annotationStore.addAnnotation({
                userGenerate: true
            });
            LS.annotationStore.selectAnnotation(c.id);
        }
    });
</script>

<div id="label-studio" />
ad12 commented 1 year ago

+1 running into this issue as well