[Question] Unexpected identifier

[tmot24]

Hello, I use React and Vite. How can I import Shader from file? In my real project I catch

SyntaxError: Unexpected identifier 'highp'

In sandbox I catch

[plugin:vite:import-analysis] Failed to resolve import "vertex.glsl"

Sandbox: https://codesandbox.io/p/sandbox/vite-plugin-glsl-pzy8im

[UstymUkhman]

Hi @tmot24 , thanks for using this plugin and for creating a reproducible demo. Can you give me a permission to play around with it? I want to try a couple things. Since I cannot edit it, for now, my best guess is that you need to use vertexSource and fragmentSource to use shaders as strings as described here. I saw you've commented that options, so you've probably tried that one, I just want to see the error by myself, thanks!

[tmot24]

Hi @tmot24 , thanks for using this plugin and for creating a reproducible demo. Can you give me a permission to play around with it? I want to try a couple things. Since I cannot edit it, for now, my best guess is that you need to use vertexSource and fragmentSource to use shaders as strings as described here. I saw you've commented that options, so you've probably tried that one, I just want to see the error by myself, thanks!

I can't give edit permission via email, can you fork ?

[UstymUkhman]

@tmot24

Yeah, sorry, I'm not familiar with codesandbox. 😅 Anyway.., I see it working as expected.., or am I missing something here..?

My Fork

[tmot24]

@UstymUkhman

Of course! I made a mistake in the import.

In fact, here is a sandbox close to reality in which I catch my mistake https://codesandbox.io/p/sandbox/storybook-9hvb6z?file=%2Fsrc%2FButton%2FTemplate.tsx it starts to seem to me that I set up the storybook incorrectly

[UstymUkhman]

Ok, now I'm pretty sure it's a codesandbox related issue, 'cause for some reason (probably it expects a JavaScript file no matter what is defined in your vite.config) it adds an ?import suffix to the glsl files. You can check it in the network tab. vertext and fragment chunks are expected to be JavaScript modules. You can import them like this (raw string) to see your demo working:

import vertex from "./vertex.glsl?raw";
import fragment from "./fragment.glsl?raw";

Are you able to reproduce the same issue on your localhost? But before that, please remember to install vite-plugin-glsl under devDependencies and use "type": "module" in your package.json.

[tmot24]

Yes, you're right, I didn't even know about raw syntax. This is a storybook setup error

[tmot24]

Thank you!