Unable to import glsl file properly

[sophyem]

Hi, I am working on a simple three.js project. I am trying to build and import a custom shader into my js code. However, after I installed the vite-plugin-vlsl following every step in the README.md file, I still could not get my js to read the glsl file properly and got the error as following:
Uncaught SyntaxError: Unexpected token '{' (at vertex.glsl?t=1679695882090&import:1:13)

I have restarted the server many times and also tried to tweak the code in the package.json file and vite.config.js file following the discussion in #1

Because the error I keep getting is the same error you would get when you don't have the plugin installed, I checked many times to make sure the setup is correct in every file, but I am still lost at what I am missing here. Thank you for your help in advance!

My package.json file:

{
  "name": "skin-earth",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.2.0",
    "vite-plugin-glsl": "^1.1.2",
    "vite-plugin-string": "^1.2.1"
  },
  "dependencies": {
    "three": "^0.150.1"
  }
}

vite.config.js file

import glsl from 'vite-plugin-glsl';
import { defineConfig } from 'vite';


export default defineConfig({
    plugins: [glsl.default()]
  });

my vertex.glsl file

void main() {
    gl_Position = vec4([1, 0, 0, 1]);
}

my main.js file

import './style.css'
import * as THREE from 'three'
import vertexShader from './shader/vertex.glsl'

console.log(vertexShader)

[sophyem]

Happy to report that I just got rid of this error by:

Deleting the node_modules folder and package_lock.json and running npm install again.

[UstymUkhman]

@sophyem Cool! Also, please note that with "type": "module" in your package.json, you don't need to use glsl.default() to set up this plugin in your vite.config, it should work with glsl() only. 😉

[sophyem]

Thank you for catching that! I changed it

[sophyem]

Hi there, Bad news... the error reappeared. Reinstalling didn't actually solve it. Please help!

[UstymUkhman]

Hi @sophyem! Sure. This error: Uncaught SyntaxError: Unexpected token '{' (at vertex.glsl?t=1679695882090&import:1:13) is probably due to this line:

gl_Position = vec4([1, 0, 0, 1]);

which should be:

gl_Position = vec4(1, 0, 0, 1);

If changing that still won't work, please try to remove vite-plugin-string 'cause it may conflict with vite-plugin-glsl, and if that won't work, share some repo where I can reproduce this issue. Thanks!