Getting 'Uncaught TypeError: Unable to determine current node version'

[marc-at-brightnight]

Getting the following in my Vite React project:

Uncaught TypeError: Unable to determine current node version
    at versionIncluded (babel-plugin-glsl_macro.js?v=9bfece69:517:15)
    at isCore (babel-plugin-glsl_macro.js?v=9bfece69:531:30)
    at ../../node_modules/resolve/lib/core.js (babel-plugin-glsl_macro.js?v=9bfece69:1047:22)
    at __require2 (chunk-GFT2G5UO.js?v=74ec9d9a:18:50)
    at ../../node_modules/resolve/index.js (babel-plugin-glsl_macro.js?v=9bfece69:1273:18)
    at __require2 (chunk-GFT2G5UO.js?v=74ec9d9a:18:50)
    at ../../node_modules/babel-plugin-glsl/node_modules/babel-plugin-macros/dist/index.js (babel-plugin-glsl_macro.js?v=9bfece69:11044:21)
    at __require2 (chunk-GFT2G5UO.js?v=74ec9d9a:18:50)
    at ../../node_modules/babel-plugin-glsl/macro.js (babel-plugin-glsl_macro.js?v=9bfece69:72632:39)
    at __require2 (chunk-GFT2G5UO.js?v=74ec9d9a:18:50)

I am using babel-plugin-glsl/macro for fragment shading. Didn't have an issue before switching from CRA recently.

Code sample:

import glsl from 'babel-plugin-glsl/macro';

class SimulationMaterial extends THREE.ShaderMaterial {
  constructor() {
    super({
      vertexShader: `varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }`,
      fragmentShader: glsl`uniform sampler2D positions;
      uniform float uTime;
      uniform float uCurlFreq;
     ....

// vite.config.mts
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';
import glsl from 'vite-plugin-glsl';

export default defineConfig({
  base: '/',
  plugins: [react(), svgr(), glsl()],
 ...

// package.json
    "vite-plugin-glsl": "^1.3.0",
    "vite-plugin-svgr": "^4.2.0",
    "@vitejs/plugin-react-swc": "^3.6.0",

Honestly not sure if this is an issue with the plugin, if I even need the plugin or if this is an issue with vite itself. Any help is appreciated.

[UstymUkhman]

Hello and thanks for using this plugin! I'm afraid I need more info to understand the root cause of this issue. Will it be possible to create a minimal reproducible example somewhere or have a link to a public GitHub repository? Thanks!

Honestly, looks like this issue is caused within the babel plugin (babel-plugin-glsl_macro.js?v=9bfece69:517:15), so first thing I would remove vite-plugin-glsl completly from your project and give it a try since it looks like you're not importing GLSL anyway but have template literals for you shaders.

If you do import GLSL as external files, try to do that with vite's ?raw suffix and check if it works. Please note that if you do that, you cannot use #include directives in your shaders without this plugin, but that might help to track down the issue you're facing.

If this issue persists, I would advise to open it here. I have never tested it with babel plugins, but usually, vite-plugin-glsl doesn't play well with glslify. You should generally consider using one over another.

Anyway, I think I could help more if I had access to some code to check how those plugins are running together. Let me know, thanks!

[marc-at-brightnight]

Thanks for the quick response.

Yeah I tried at first without the plugin, didn't work. Removing the plugin didn't work either.

You meant adding ?raw to end of import, like import glsl from 'babel-plugin-glsl/macro?raw';? That gave me a type error when trying to use glsl.

Yeah I checked the babel-plugin-glsl repo, looks like the last open issue is related to vite and the process is not defined error. I got that at first but fixed it with define: { 'process.env': {}, }.

Here's a reproduced example. Not sure if it meets the definition of 'minimal' but you can ignore most of the code. See DevBox here

[UstymUkhman]

Hi again! Honestly, I haven't figured out what's the issue with vite & babel-plugin-glsl but it seems like it's not related to this plugin since it persists even without vite-plugin-glsl being installed.

I would advice against this babel plugin since it looks pretty old and not compatible with vite out of the box. If I had to use glslify, I would opt for a simpler solution like vite-plugin-glslify or vite-plugin-glslify-inject. And here's an example of how to use the first one with R3F.

If, on the other hand, you don't need to use glslify, and want to write your shaders on your own or import them using a different strategy (#include), then feel free to add this plugin to your devDependencies and check the Readme of this repo on how to set and use it in your project.

Cheers!