Uppy is not a constructor #8

CovertError · 2022-01-12T11:12:11Z

I tried to follow the instructions only difference being I used the CDNs and uppy doesn't show up in the console I'm getting this error any ideas I'm using this CDN <script src="https://releases.transloadit.com/uppy/v2.0.2/uppy.min.js"></script> and <script src="//unpkg.com/alpinejs" defer></script>

Uncaught TypeError: Uppy is not a constructor at eval (eval at <anonymous> (alpinejs:5:599), <anonymous>:27:26) at alpinejs:5:936 at Vt (alpinejs:1:4604) at w (alpinejs:5:79) at alpinejs:5:27365 at Function.<anonymous> (alpinejs:5:10229) at r (alpinejs:5:1652) at n (alpinejs:5:1682) at Qt (alpinejs:5:1692) at S (alpinejs:5:4344) at alpinejs:5:3867 at Array.forEach (<anonymous>) at Object.nr [as start] (alpinejs:5:3855) at alpinejs:5:32510

The text was updated successfully, but these errors were encountered:

swilla · 2022-01-12T11:29:44Z

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past.

The way we are using this on one project is with Laravel Mix.

At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

CovertError · 2022-01-12T12:18:53Z

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past.

The way we are using this on one project is with Laravel Mix.

At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

so I tried something a bit different where I'm not using alpinejs and there mostly everything works but when I try to upload a file I get

[Uppy] [16:08:54] Failed to upload Screenshot_48.jpg Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

[Uppy] [16:08:54] Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

the URL part would have the companionUrl I just cant really show the URL

CovertError · 2022-01-12T12:21:06Z

I tried to follow the instructions only difference being I used the CDNs and uppy doesn't show up in the console I'm getting this error any ideas I'm using this CDN <script src="https://releases.transloadit.com/uppy/v2.0.2/uppy.min.js"></script> and <script src="//unpkg.com/alpinejs" defer></script>

Uncaught TypeError: Uppy is not a constructor at eval (eval at <anonymous> (alpinejs:5:599), <anonymous>:27:26) at alpinejs:5:936 at Vt (alpinejs:1:4604) at w (alpinejs:5:79) at alpinejs:5:27365 at Function.<anonymous> (alpinejs:5:10229) at r (alpinejs:5:1652) at n (alpinejs:5:1682) at Qt (alpinejs:5:1692) at S (alpinejs:5:4344) at alpinejs:5:3867 at Array.forEach (<anonymous>) at Object.nr [as start] (alpinejs:5:3855) at alpinejs:5:32510

the order where I'm adding those assets I tried calling alpinejs first and I tired called the puppy first both didn't work again I need to use the CDN and not npm

CovertError · 2022-01-12T12:47:17Z

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past.
The way we are using this on one project is with Laravel Mix.
At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

so I tried something a bit different where I'm not using alpinejs and there mostly everything works but when I try to upload a file I get

[Uppy] [16:08:54] Failed to upload Screenshot_48.jpg Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

[Uppy] [16:08:54] Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

the URL part would have the companionUrl I just cant really show the URL

note I'm using laravel vapor which could be causing issues I'm not sure

swilla · 2022-01-12T13:29:41Z

We are using vapor for this project as well, and it is working OK for us. Maybe it has something to do with your configuration for S3:

From filesystems.php:

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID_UPLOAD'),
            'secret' => env('AWS_SECRET_ACCESS_KEY_UPLOAD'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_accelerate_endpoint' => env('AWS_USE_ACCELERATE_ENDPOINT'),
        ],

From .env:

AWS_DEFAULT_REGION="us-east-2"
AWS_BUCKET="bucket-name"
AWS_URL="https://s3.amazonaws.com"
AWS_ACCESS_KEY_ID_UPLOAD=
AWS_SECRET_ACCESS_KEY_UPLOAD=
AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID_UPLOAD}
AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY_UPLOAD}
AWS_USE_ACCELERATE_ENDPOINT=true

CovertError · 2022-01-12T13:31:46Z

no its exactly the same only difference is this AWS_USE_ACCELERATE_ENDPOINT=true and I don't think it would do any of this

CovertError · 2022-01-12T13:32:47Z

the thing is uploading files normally without multipart works well

swilla · 2022-01-12T13:41:55Z

If you want to provide a link to a sample repo where this is not working as you described I can take a look.

CovertError · 2022-01-12T13:55:54Z

sure I'll set one up

CovertError · 2022-01-12T13:56:04Z

thank you so much for your help

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uppy is not a constructor #8

Uppy is not a constructor #8

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

Uppy is not a constructor #8

Uppy is not a constructor #8

Comments

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022

swilla commented Jan 12, 2022

CovertError commented Jan 12, 2022

CovertError commented Jan 12, 2022