Starting from v3.0.0, Vite uses node: imports which are supported in v16.0.0+ and v14.18.0+ of Node.js.

This is a intended breaking change because Node v15 is already EOL.

In v0.3.0 this plugin was updated to be a pure ESM, this means it cannot be require()'d from CommonJS anymore.

The goal of this issue is to demonstrate how vite-plugin-glsl should be used in case you're experiencing some problems after installation and what are some possible workarounds.

1. Recommended Usage:

• Update your project to an ESM module by adding "type": "module" in your package.json. When using <npm|yarn|pnpm> create vite this comes by default with Vite v3.0.0+.

• In your vite.config.js (or vite.config.ts) use this plugin as usual:

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

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

2. CommonJS Project With Config Module:

• If for any reason you cannot add "type": "module" to you package.json, be sure to rename your vite.config file to vite.config.mjs (or vite.config.mts).

• This will allow you to import this package by using top-level-await:

import { defineConfig } from 'vite';
const glsl = (await import('vite-plugin-glsl')).default;

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

3. CommonJS Project Without Config Module:

• If you're stuck with a CommonJS project and for some reason you don't want to (or cannot) rename your vite.config file, you can use an async function to define a config object in your vite.config.js (or vite.config.ts):

import { defineConfig } from 'vite';

export default defineConfig(async () => {
  const glsl = (await import('vite-plugin-glsl')).default;

  return {
    plugins: [glsl()]
  }
});

As a last resort, if anything above don't work in you case, you can still use v0.2.2 of this plugin by running:

npm i [email protected] --save-dev
# or
yarn add [email protected] --dev

Here you can find more info about Vite v3.0.0 and this is a great Gist about ESM packages.