Uncaught TypeError: ResizeObserver is not a constructor

I am getting the error Uncaught TypeError: ResizeObserver is not a constructor when trying to use Uppy in my app. I am using it in a VueJS app that I am working on. Below is a sample of the code that I am currently working on.

` const Uppy = require(‘@uppy/core’); const Dashboard = require(‘@uppy/dashboard’); const XHRUpload = require(‘@uppy/xhr-upload’); const Form = require(‘@uppy/form’);

initiateUppy() {
            let self = this;
            self.uppyData = Uppy({
                id: 'blog-featured-image',
                debug: true,
                autoProceed: false,
                restrictions: {
                    maxFileSize: 4096000,
                    maxNumberOfFiles: 1,
                    minNumberOfFiles: 1,
                    allowedFileTypes: ['image/*']
                }
            })
                .use(Dashboard, {
                    trigger: '.attach-message-image',
                    inline: true,
                    target: '.DashboardContainer',
                    hideUploadButton: true,
                    replaceTargetContent: true,
                    note: 'Images only, 1 file, up to 4 MB',
                    height: 300
                })
                .use(Form, {
                    target: '#blog-form'
                })
                .use(XHRUpload, {
                    endpoint: self.uploadUrl,
                    fieldName: 'files[]',
                    bundle: false,
                    formData: true,
                    headers: {
                        'X-CSRF-TOKEN': window.CoronaCms.csrfToken,
                        'section': 'blog-feature-image'
                    },
                    getResponseError(content, xhr) {
                        console.log(content);
                        console.log(xhr);
                        return JSON.parse(content);
                    }
                });

            self.uppyData.on('file-added', (file, data) => {
                self.filesUploaded++;
            });

            self.uppyData.on('file-removed', (file, data) => {
                self.filesAttached--;
            });

            self.uppyData.on('complete', (result, xhr) => {

                displaySuccessMessage(`<strong>${self.article.title}</strong> has been updated successfully`);
                self.$appBusEvent.$emit('hide-action-loader');
                self.$router.push({name: 'blog.articles'});
                self.$appBusEvent.$emit('refresh-data-table');
                // self.reset();
            })
        }

`

I have attached a screenshot of the error I am getting.

Does anyone have an idea on how to resolve this issue?

Thanks

Manny

[arturi]

Fix released in latest 0.27.5: https://npmjs.com/package/@uppy/dashboard. Please update and let me know if it works for you!

[goto-bus-stop]

I think this might be a similar issue as we had in the past with get-form-data, where some tools use the CommonJS build and some use the ES modules build, and the exports don’t match. According to #1073, it works with .default (assuming an ES modules build is used), but in browserify and other CommonJS based tools it only works without .default.