Error "require() of ES Module not supported." after adding vite-plugin-glsl to vite.config.ts

[felixniemeyer]

Hi, thanks for working on this!

Unfortunately, i stumble right at the beginning when trying to make this work.

If I add vite-plugin-glsl to my config like advised ...

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import glsl from 'vite-plugin-glsl';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    glsl(), 
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

... I get this error:

failed to load config from .../project/vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module .../project/node_modules/vite-plugin-glsl/src/index.js from .../project/vite.config.ts not supported.
Instead change the require of index.js in .../project/vite.config.ts to a dynamic import() which is available in all CommonJS modules.
    at Object._require.extensions.<computed> [as .js] (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17)
    at Object.<anonymous> (.../project/vite.config.ts:35:39)
    at Object._require.extensions.<computed> [as .js] (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63154:24)
    at loadConfigFromBundledFile (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63162:21)
    at loadConfigFromFile (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63020:34)
    at async resolveConfig (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62643:28)
    at async createServer (file://.../project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20)
    at async CAC.<anonymous> (file://.../project/node_modules/vite/dist/node/cli.js:707:24)

[felixniemeyer]

Oh, I just realized somebody had the same issue over here: #22

Adding "type": "module" to the package.json worked out.

[jakewhiteley]

@UstymUkhman can this be reopened? "type": "module" is not a good fix.

For instance I add that into my package.json, and then it causes issues with other vite plugins/node features:

Dynamic require of "file:///C:/wamp64/www/test/quick/node_modules/purgecss-with-wordpress/index.js" is not supported

and

Error: Dynamic require of "path" is not supported

Could you not just create an alternative entry point into your plugin for those of us who need to include it in a more standard way?

[UstymUkhman]

Hi @jakewhiteley, I can take a look at the best solution for this issue, but can you tell me first your node and vite versions, please? Also, you can take a look at this issue for possible workarounds at the moment.

[jakewhiteley]

@UstymUkhman I am using Vite 3.2.5 and node 16.14.0

[jakewhiteley]

I will also try on Vite 4.*

[UstymUkhman]

Ok, thanks! Can you also explain why the workarounds described in the issue I've linked above don't work in your case?

[rogersanick]

Hey @UstymUkhman - the work around listed above doesn't work in my case because it breaks Tailwind CSS :( Is there another option?

[UstymUkhman]

Hi @rogersanick! Thanks for using this plugin. If you're talking only about "type": "module", feel free to check this issue for other possible workarounds. If none if them will work, please consider creating a reproducible demo or linking an existing repo so I can take a look an find the best way to fix it. Thanks!