vipero07/svelte-panorama

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Closed this issue · 6 comments

M4TY commented

Hi, I am getting this error when running npm run dev when using your component. Is there any way to fix this? Using newest version of Svelte

vipero07 commented

I'll look into this

TGilany commented

Hey @vipero07,

I was also trying to use it and I get the following error (I'm using SvelteKit with the latest versions)

11:00:41 PM [vite-plugin-svelte] /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/Component.svelte:1:16 'tag' option is deprecated — use 'customElement' instead
Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
Parse failure: Unexpected token (1:0)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/fragment.glsl
Contents of line 1: #ifdef GL_FRAGMENT_PRECISION_HIGH
Failed to load url ogl (resolved id: ogl) in /home/*****/Projects/*****node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/Component.svelte. Does the file exist?
11:00:41 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/Component.svelte: failed to import "/node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl"
|- Error: Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
    at ssrTransformScript (file:///home/*****/Projects/*****node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
    at ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
    at Object.ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
    at loadAndTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
    at async instantiateModule (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

11:00:41 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/index.js: failed to import "/node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/Component.svelte"
|- Error: Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
    at ssrTransformScript (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
    at ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
    at Object.ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
    at loadAndTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
    at async instantiateModule (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

11:00:41 PM [vite] Error when evaluating SSR module /src/routes/[threesixties=threesixties]/[id]/+page.svelte: failed to import "/node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/index.js"
|- Error: Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
    at ssrTransformScript (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
    at ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
    at Object.ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
    at loadAndTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
    at async instantiateModule (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

Internal server error: Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
      at ssrTransformScript (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
      at ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
      at Object.ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
      at loadAndTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
      at async instantiateModule (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)
Error: Parse failure: Unexpected token (1:10)
At file: /node_modules/.pnpm/svelte-panorama-component@1.0.2/node_modules/svelte-panorama-component/src/shaders/vertex.glsl
Contents of line 1: attribute vec2 uv;
    at ssrTransformScript (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55343:15)
    at ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55318:12)
    at Object.ssrTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64992:20)
    at loadAndTransform (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54989:24)
    at async instantiateModule (file:///home/*****/Projects/*****/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.4_sass@1.64.2/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

Thanks!

TGilany commented

*** UPDATE ***
I did manage to use it like this

<script lang="ts">
	import { onMount } from 'svelte';

	let Panorama: ConstructorOfATypedSvelteComponent;

	onMount(async () => {
		Panorama = (await import('svelte-panorama-component/dist/index.min.mjs')).default;
	});
</script>

<svelte:component this={Panorama} src={url} />
vipero07 commented

Looks like the way I wrote this was deprecated. I'll update this in a bit to not use tag.

  • 🚀1
vipero07 commented

@M4TY @TGilany
I misunderstood the issue, though the custom tag was an issue when updating to the latest svelte, the actual issue was when using as a svelte component a plugin needs to be added to import the glsl files.

Either one of these should suffice depending on your setup.

I made a new release to go along with it.
https://github.com/vipero07/svelte-panorama/releases/tag/1.1.0

Now that sveltekit exists (I think I made this in the days of sapper) and has a library function I may rework this into a more svelte friendly thing. When it was initially developed it was to use on any website as a custom element.

vipero07 commented

svelte-panorama/svelte-kit-example/src/routes/+page.svelte

Lines 28 to 32 in 5177e90

<Panorama
class="panorama"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Veste_Oberhaus_%28Passau%2C_full_spherical_panoramic_image%2C_equirectangular_projection%29.jpg/2560px-Veste_Oberhaus_%28Passau%2C_full_spherical_panoramic_image%2C_equirectangular_projection%29.jpg"
alt="Some Outdoor Location"
/>

svelte-panorama/svelte-kit-example/vite.config.js

Lines 3 to 7 in 5177e90

import glsl from 'vite-plugin-glsl';
export default defineConfig({
plugins: [glsl(), sveltekit()]
});

svelte-panorama/svelte-kit-example/package.json

Line 29 in 5177e90

"vite-plugin-glsl": "^1.1.2"