Hi everyone,
I’m quite new to Uppy (and Svelte for that matter). And when installing both in combination with pretty much the stock example
<script lang="ts">
import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/svelte'
import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import Tus from "@uppy/tus";
import German from '@uppy/locales/lib/de_DE';
const createUppy = () => {
var uppy = new Uppy({
locale: German,
restrictions: {
maxFileSize: 300000000,
allowedFileTypes: ['image/*', 'video/*']
},
})
uppy.use(Webcam)
uppy.use(Tus, {
endpoint: "localhost:8080/upload/alach",
chunkSize: 100000000,
})
return uppy
}
let uppy1 = createUppy()
let uppy2 = createUppy()
let open = false;
let showInlineDashboard = true;
</script>
<main>
<h1>Willkommen bei der Kirmes</h1>
<h2>Inline Dashboard</h2>
<label>
<input
type="checkbox"
bind:checked={showInlineDashboard}
/>
Show Dashboard
</label>
{#if showInlineDashboard}
<Dashboard
uppy={uppy1}
plugins={['Webcam']}
/>
{/if}
<h2>Modal Dashboard</h2>
<div>
<button on:click={() => open = true}>Show Dashboard</button>
<DashboardModal
uppy={uppy2}
open={open}
props={{
onRequestCloseModal: () => open = false,
plugins: ['Webcam']
}}
/>
</div>
<h2>Drag Drop Area</h2>
<DragDrop
uppy={uppy1}
/>
<h2>Progress Bar</h2>
<ProgressBar
uppy={uppy1}
props={{
hideAfterFinish: false
}}
/>
</main>
<style global>
@import "@uppy/core/dist/style.min.css";
@import "@uppy/dashboard/dist/style.min.css";
@import "@uppy/drag-drop/dist/style.min.css";
@import "@uppy/progress-bar/dist/style.min.css";
input[type="checkbox"] {
user-select: none;
}
</style>
I keep getting this mistake:
✘ [ERROR] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/StatusBar.svelte:3:14 Unexpected token [plugin vite-plugin-svelte:optimize-svelte]
node_modules/@uppy/svelte/src/components/StatusBar.svelte:3:14:
3 │ import type { Uppy } from '@uppy/core';
╵ ^
The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import
node_modules/@uppy/svelte/src/index.js:5:37:
5 │ export { default as StatusBar } from './components/StatusBar.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/DashboardModal.svelte:3:14 Unexpected token [plugin vite-plugin-svelte:optimize-svelte]
node_modules/@uppy/svelte/src/components/DashboardModal.svelte:3:14:
3 │ import type { Uppy } from '@uppy/core';
╵ ^
The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import
node_modules/@uppy/svelte/src/index.js:2:42:
2 │ export { default as DashboardModal } from './components/DashboardModal.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/Dashboard.svelte:3:14 Unexpected token [plugin vite-plugin-svelte:optimize-svelte]
node_modules/@uppy/svelte/src/components/Dashboard.svelte:3:14:
3 │ import type { Uppy } from '@uppy/core';
╵ ^
The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import
node_modules/@uppy/svelte/src/index.js:1:37:
1 │ export { default as Dashboard } from './components/Dashboard.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/DragDrop.svelte:3:14 Unexpected token [plugin vite-plugin-svelte:optimize-svelte]
node_modules/@uppy/svelte/src/components/DragDrop.svelte:3:14:
3 │ import type { Uppy } from '@uppy/core';
╵ ^
The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import
node_modules/@uppy/svelte/src/index.js:3:36:
3 │ export { default as DragDrop } from './components/DragDrop.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/ProgressBar.svelte:3:14 Unexpected token [plugin vite-plugin-svelte:optimize-svelte]
node_modules/@uppy/svelte/src/components/ProgressBar.svelte:3:14:
3 │ import type { Uppy } from '@uppy/core';
╵ ^
The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import
node_modules/@uppy/svelte/src/index.js:4:39:
4 │ export { default as ProgressBar } from './components/ProgressBar.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/esbuild/lib/main.js:1472
let error = new Error(text);
^
Error: Build failed with 5 errors:
node_modules/@uppy/svelte/src/components/Dashboard.svelte:3:14: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/Dashboard.svelte:3:14 Unexpected token
node_modules/@uppy/svelte/src/components/DashboardModal.svelte:3:14: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/DashboardModal.svelte:3:14 Unexpected token
node_modules/@uppy/svelte/src/components/DragDrop.svelte:3:14: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/DragDrop.svelte:3:14 Unexpected token
node_modules/@uppy/svelte/src/components/ProgressBar.svelte:3:14: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/ProgressBar.svelte:3:14 Unexpected token
node_modules/@uppy/svelte/src/components/StatusBar.svelte:3:14: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/@uppy/svelte/src/components/StatusBar.svelte:3:14 Unexpected token
at failureErrorWithLog (/Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/esbuild/lib/main.js:1472:15)
at /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/esbuild/lib/main.js:945:25
at /Users/justinjakull/Projects/kilbi/frontend-ts/node_modules/esbuild/lib/main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
I’ve setup both for typescript with the standard:
npm create svelte@latest
I’ve selected typescript, yet it keeps failing and i can’t seem to find the reason for that. The versions are all ‘latest’. I’m not quite shure what I’m doing wrong but the internet doesn’t really offer any solution so I hoped you might help me.
Best wishes,
Justin Jakull