Uppy: Uncaught TypeError: ResizeObserver is not a constructor

Created on 21 Sep 2018 · 9Comments · Source: transloadit/uppy

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.

screenshot_30

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

Thanks

Manny

Bug

Source

grafikkaos

👍3

All 9 comments

I've upgraded from 0.22 to 0.27 and getting the same error. Its an angular 5 based app.

meladawy on 24 Sep 2018

👍1

Hi! Could you specify, which build tool are you using? Trying to reproduce.

arturi on 24 Sep 2018

Getting the same error in my react application. Used create-react-app.

rmagon on 24 Sep 2018

@arturi I'm using angular-cli. Here is my package.json

https://gist.github.com/meladawy/fd7cef1e5a13254f318e058507c12678

meladawy on 25 Sep 2018

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.

goto-bus-stop on 25 Sep 2018

👍1

Yes, @goto-bus-stop I remembered we had a similar problem already. Thanks for explaining this again! Is there anything package author could fix (we could PR) that would resolve this to not require having to check for .default?

arturi on 25 Sep 2018

Same here - using vue-cli 3 to build a library. Including the UMD Version in a page creates the same exception.