Unable to import vite module

[Vanderscycle]

Hey,
Thank you for making this vite plugins to better manage file imports. However, I need your help as I can't seem to get working, even after following the README.md and ensuring that the npm packages was saved as a dev dependency.

I am currently getting the following error related to this plugin regardless of vite dev/build.

failed to load config from /home/henri/Documents/aviaryTech/viteExperiment/vite.config.js
error when starting dev server:
TypeError: glsl is not a function
    at file:///home/henri/Documents/aviaryTech/viteExperiment/vite.config.js?t=1633044514306:9:5
    at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
    at async Loader.import (internal/modules/esm/loader.js:177:24)
    at async loadConfigFromFile (/home/henri/Documents/aviaryTech/viteExperiment/node_modules/vite/dist/node/chunks/dep-972722fa.js:75828:31)
    at async resolveConfig (/home/henri/Documents/aviaryTech/viteExperiment/node_modules/vite/dist/node/chunks/dep-972722fa.js:75434:28)
    at async createServer (/home/henri/Documents/aviaryTech/viteExperiment/node_modules/vite/dist/node/chunks/dep-972722fa.js:73957:20)
    at async CAC.<anonymous> (/home/henri/Documents/aviaryTech/viteExperiment/node_modules/vite/dist/node/cli.js:13963:24)

The current vite.config.js implementation is simple for now:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
//import vitePluginString from 'vite-plugin-string'
import glsl from 'vite-plugin-glsl';
// https://vitejs.dev/config/
export default defineConfig({
  plugins:
    [svelte(),
    glsl()],
  optimizeDeps: {
    exclude: ["svelte-navigator"],
  }
})

Any help is greatly appreciated,
@dikbek, pinging you for tracking

[UstymUkhman]

Hi @Vanderscycle and @dikbek.
Hmm.., that's weird... Can I take a look at vite & vite-plugin-glsl versions from your package.json along with node and npm versions installed on your maschine?
Also a console.log(glsl) in your vite.config.js might be useful.

[dikbek]

Hi @UstymUkhman

Thanks for your quick response!

This is from the package.json:

"devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11", "@types/three": "^0.131.0", "svelte": "^3.37.0", "svelte-navigator": "^3.1.5", "vite": "^2.5.1", "vite-plugin-glsl": "^0.0.4", "vite-plugin-string": "^1.0.1" }

I'm running NPM version 7.23.0, node version v14.17.3.

I had the same problem trying to add vite-plugin-string to vite.config.js so I'm sure I've made a mistake somewhere. I'm relatively new to this so I could be overlooking something fundamental. @Vanderscycle is doing his best to help me out with it.

Much appreciated!

[UstymUkhman]

Hi @dikbek. Thanks for the info!

Honestly, I suspect the error might be caused by some vite chunks haven't compiled correctly (see Vanderscycle's stack trace above). I would suggest you to remove the node_modules folder along with the package-lock.json (or yarn.lock) and run npm cache clean --force.

Then try to re-install all dependencies and print the glsl function in your vite.config.js so we can see if the glsl function is fetched correctly from node modules. If that won't work, please upgrade vite to version 2.5.10 if your project allows you to do that (maybe even to the latest, currently it's 2.6.2).

Feel free to come back here any time.
Sorry, I won't have time to check this by myself next few days, but if the problem persists, I'll try to take a look next week.

...And thanks a lot for your star on this project. :)

[dikbek]

Hi @UstymUkhman

Thanks for your suggestions. I implemented all of them but sadly I'm still getting the same error when I add the plugin on vite.config.js. And those chunk errors as well. I'm getting the exact same error when I try with vite-plugin-string. Can't understand why it insists they are not functions.

I'll keep trying to figure it out so long. I'll let you know if I solve it, otherwise any help when you get back would be greatly appreciated :)

[UstymUkhman]

@dikbek I'm sorry man, there has to be something else... Here's my quick test:

package.json:

{
  "name": "vite-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
    "@types/three": "^0.131.0",
    "svelte": "^3.37.0",
    "svelte-navigator": "^3.1.5",
    "vite": "^2.5.1",
    "vite-plugin-glsl": "^0.0.4",
    "vite-plugin-string": "^1.0.1"
  }
}

vite.config.js:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
//import vitePluginString from 'vite-plugin-string'
import glsl from 'vite-plugin-glsl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins:
    [svelte(),
    glsl()],
  optimizeDeps: {
    exclude: ["svelte-navigator"],
  }
})

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module" src="./index.js"></script>
</body>
</html>

index.js:

import glsl from './index.glsl';

console.log(glsl);

index.glsl:

precision highp float;

#include chunk;

out highp vec4 fragColor;

void main (void) {
  fragColor = chunkFn();
}

chunk.glsl:

highp vec4 chunkFn () {
  return vec4(1.0, 0.0, 0.0, 1.0);
}

Output:

Am I missing something?

[dikbek]

Thanks again @UstymUkhman.

I doubt you're missing anything. It's me that's missing something. I tried to recreate your test but getting other errors, maybe to do with my lack of 'env.mjs'. I'm feeling so out of my depth here. Not sure what to do, but I guess I'll have to try set up a fresh vite/svelte startup folder and try again.

Feel like I've wasted your time a bit here. Clearly just my lack of general understanding playing out. Thanks anyway. Will let you know if I have any success.

[UstymUkhman]

No problem for my time (it was just 30 minutes). Sure, let me know if you'll have any updates on the fresh project where I can help you. :)

[Vanderscycle]

@UstymUkhman thank you again for all the help.

[UstymUkhman]

@Vanderscycle @dikbek How this thing is going? Is the issue still present? Do you have any updates that might be useful to me in helping you guys?

[dikbek]

Hi @UstymUkhman, I must admit I still haven't managed to solve it. I had to give up and carry on - my glsl usage is pretty minimal so I just included it in the js. I have a repo where the error lies - it's on the page 'portal'. I am hoping maybe you can take a look and let me know what you think is wrong with my setup? Any help would be greatly appreciated.

[UstymUkhman]

Hi @dikbek . I've checked you repo (cool tutorials from Bruno, btw...) and created a pull request to fix shader imports on the portal page. Two things there:

• I've removed "type": "module" in you package.json so you can use vite-plugin-glsl (and vite-plugin-string) in your vite.config.js as described in Readme of this project. This was causing the initial issue opened by Vanderscycle: TypeError: glsl is not a function. However, if for some reason you need to keep it, then using glsl.default() should works as well from what I've seen.

• I've commented vite-plugin-string in your vite.config.js because it conflicts with vite-plugin-glsl when importing the shader on the portal page: when using vite-plugin-string, your shader gets exported like this: export default "<ACTUAL_SHADER_CODE>"; so you cannot use it directly as string in your ShaderMaterial. This was actually the main reason I created this plugin. 😅

Please let me know if there still a problem I've missed or if I can close this issue as it seems that the original error was solved. Cheers!

[dikbek]

Hi @UstymUkhman,

Thanks a million, it's working! Legendary!

Ok, I understand now. It was so simple. Thanks for your patience! Great job on fixing the plugin. It is very much appreciated!

One last thing - Do you think it could become a problem that I'm not using type: module?

[UstymUkhman]

Hi @dikbek , thanks, no problem, I'm glad I could help. :)

Regarding the "type": "module", I'm not familiar with this approach, but as far as I understood, it matters only if you're building a node.js application. Basically it tells Node to import .js files as ES6 modules similar to <script type="module"></script> so you could use import & export keywords in your JS when working in Node environment.

That might actually lead to the problem you had with this plugin 'cause, as you can see here, I'm compiling typescript source code as CommonJS, so glsl function gets exported like this:

exports.default = default_1;

but, when using "type": "module" in the package.json your node expects something like this:

export default default_1; (where default_1 is the glsl function). So, if everything above is correct, when you were trying to import this plugin, what your node actually saw might be something similar to this:

export { default: default_1 }; and that could explain why you had to use

import glsl from 'vite-plugin-glsl';
...
plugins: [glsl.default()]

You can find more info about "type": "module" here:

https://nodejs.org/api/packages.html#packagejson-and-file-extensions
https://nodejs.org/docs/latest-v13.x/api/esm.html#esm_package_json_type_field
https://developer.okta.com/blog/2019/12/04/whats-new-nodejs-2020#support-for-ecmascript-modules
https://blog.logrocket.com/es-modules-in-node-today/

Cheers!