ESM file cannot be loaded by require

[asbjornu]

Similar to #1, I'm unable to load this plugin with Vite (version 5.2.13). With the following code:

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

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

…the following exception occurs when I run vite build:

✘ [ERROR] "vite-plugin-glsl" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/esbuild/lib/main.js:1374:27:
      1374 │         let result = await callback({
           ╵                            ^

    at file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:69919:35
    at requestCallbacks.on-resolve (./node_modules/esbuild/lib/main.js:1374:28)
    at handleRequest (./node_modules/esbuild/lib/main.js:732:17)
    at handleIncomingPacket (./node_modules/esbuild/lib/main.js:757:7)
    at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1293:20:
      1293 │       let promise = setup({
           ╵                     ^

    at setup (file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:69883:27)
    at handlePlugins (./node_modules/esbuild/lib/main.js:1293:21)
    at buildOrContextImpl (./node_modules/esbuild/lib/main.js:979:5)
    at Object.buildOrContext (./node_modules/esbuild/lib/main.js:788:5)
    at ./node_modules/esbuild/lib/main.js:2215:15
    at new Promise (<anonymous>)
    at Object.build (./node_modules/esbuild/lib/main.js:2214:25)
    at build (./node_modules/esbuild/lib/main.js:2047:51)
    at bundleConfigFile (file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:69842:26)

  The plugin "externalize-deps" was triggered by this import

    vite.config.js:6:17:
      6 │ import glsl from 'vite-plugin-glsl';
        ╵                  ~~~~~~~~~~~~~~~~~~

failed to load config from ./vite.config.js
error during build:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1374:27: ERROR: [plugin: externalize-deps] "vite-plugin-glsl" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
    at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1651:15)
    at ./node_modules/esbuild/lib/main.js:1059:25
    at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1486:45)
    at buildResponseToResult (./node_modules/esbuild/lib/main.js:1057:7)
    at ./node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (./node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (./node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:324:12)

As you can see, I don't use require() to load vite-plugin-glsl. I don't have "type": "module" in package.json, because use Eleventy v2 which still isn't fully compatible with ESM (it will be in v3).

I use other Vite plugins such as @yushijinhun/three-minifier-rollup and vite-plugin-compression in the same project, and they work fine. Removing these problems does not help. Any idea why vite-plugin-glsl isn't loading?

[UstymUkhman]

Hello @asbjornu and thanks for using this plugin. Please check issue #16 for some workarounds for your situation. That should help. At least, it worked well with v0.3.0, but many things have changed since then, so keep me updated if you face another related issue, thanks!

Cheers!

[asbjornu]

@UstymUkhman, indeed that helped! 🎉 I resorted to making the defineConfig() argument an async function and awaiting the import within it as such (instead of renaming vite.config.js to vite.config.mjs):

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

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

Thank you! 🙏🏼 Now I just need to figure out the following problem:

x Build failed in 1.64s
error during build:
[vite]: Rollup failed to resolve import "/shaders/LabelColliderMaterial.vert" from "./_site/scripts/CreateLabel.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:68871:27)
    at onRollupWarning (file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:68899:9)
    at onwarn (file://./node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:68582:13)
    at file://./node_modules/rollup/dist/es/shared/node-entry.js:18514:13
    at Object.logger [as onLog] (file://./node_modules/rollup/dist/es/shared/node-entry.js:20162:9)
    at ModuleLoader.handleInvalidResolvedId (file://./node_modules/rollup/dist/es/shared/node-entry.js:19104:26)
    at file://./node_modules/rollup/dist/es/shared/node-entry.js:19062:26
ERROR: "vite:build" exited with 1.

…caused by this import statement:

import LabelColliderMaterialVertexShader from '/shaders/LabelColliderMaterial.vert';

Should I create a new issue for that?

[UstymUkhman]

@asbjornu I believe with /shaders/..., vite will atempt to import from your /public directory as a path. Do you have your shaders in there? If yes, it won't work with vite-plugin-glsl. Try to move them in your /src directory and update the import path. Also, a minimal reproducible example might help a lot. 😉

[asbjornu]

@UstymUkhman, sorry this was just me being silly. The application in question is made with Eleventy, and I had just forgotten to add eleventyConfig.addPassthroughCopy('src/shaders'); to .eleventy.js so the entire shaders folder was missing in its output and thus also from the subsequent vite build. 🤦🏼‍♂️

Your plugin now seems to be working flawlessly. 🎉 Thank you for creating it, and for providing such swift and excellent support! 🙏🏼

[UstymUkhman]

Great @asbjornu! I'm glad it worked. Thanks for the kind words and for using this plugin, I appreciate it. Feel free to give it a ⭐if you've found it any useful, thanks!